Question

In my web page I am using Add Dynamic Field Functionality by using jQuery.

I am adding a new div by clicking on an existing div:

<div class="divA">divA1 </div> 
<div class="divB" >DivB1 </div>
<div class="divC" />DivC1 </div> 

By clicking on the parent div I am creating a new dynamic div

<div class="divA">DivA2 </div>  

It is coming at the end of the all div’s like that.

<div class="divA">divA1 </div> 
<div class="divB" >DivB1 </div>
<div class="divC" />DivC1 </div>
<div class="divA">DivA2 </div>  

But I need it alongside the parent div like this:

<div class="divA">divA1 </div> 
<div class="divA">DivA2 </div> 
<div class="divB" >DivB1 </div>
<div class="divC" />DivC1 </div>

This is my jQuery code:

    newTextBoxDiv = $(document.createElement('div'))
     .attr("id", text).attr("class", 'test0 ' + text);
    newTextBoxDiv.html('<div style=" width:150px; class="DivA" float: left"> </div>'); 
}

newTextBoxDiv.appendTo("#contents");

contents is id of main div

Answer 1

Try this

JS Code

 $('.divA').on('click', function(){
      $(this).after('<div/>').next().attr('class', 'divA2').text('divA2');
 });

Demo: http://jsfiddle.net/mhn3q/11/