在最后插入的元素之后在元素div中插入元素

Question

我实际上正在使用一个所见即所得的编辑器，我想在最后一个插入的元素之后动态插入一个注释栏和一个警告栏（两者都是可以输入文本的DIV），就像这个Note一样，但它是不工作，如果我在插入按钮上单击另一次，它不会插入任何东西。此外，如果我先插入，我希望alerte div放在note div之前。任何人都可以帮助我，你有更好的解决方案在我的编辑器中添加一个删除的可编辑文本区吗？

$(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>