javascript - Insert elements in a contenteditable div after the last inserted element -

i working on wysiwyg editor , want insert dynamically note bar , alert bar (both divs can type text ) note after last inserted element, it's not working , if click time on insertion button doesn't insert anything. besides, want alerte div placed before note div if insert first. can me, have better solution add delemited editable textarea in editor ?

$(function () {          $("#add").click(function(e) {              e.preventdefault();              var $new = $('#bar');              $('#bar').append('<div id="bar">');              $new.show('slow');          });                             $("#add2").click(function(e) {              e.preventdefault();              var $new = $('#alerte');              $('#alerte').append('<div id="alerte">');              $new.show('slow');          });      });

    <!-- editer le contenu.-->      <div class="editor" contenteditable="true" spellcheck="false">          text editor ...          <div id="bar" style="display: none"; >  	    <div class="note" contenteditable="false" spellcheck="true"> <b>note</b></div>          <div class="notecontenu" contenteditable="true" spellcheck="false">  		</div>       </div>       <div  id="alerte" style="display: none";>  	    <div class="attention" contenteditable="false" spellcheck="true"> <b>attention</b></div>          <div class="alertecontenu" contenteditable="true" spellcheck="false">  		</div>       </div>       </div>  <button id="add" >note </button>  <button id="add2" >alerte </button>