jquery - i'm trying to insert after <div class="tbox"> and <div class="tarea"> only the latest <div class="properties"> but here every div it is inserted -

<fieldset id="tt">     <div class="cts">         <div class="tbox">             <input type="text" class="pp"/>         </div>     </div>     <div class="cts">         <div class="tarea">             <input type="text">         </div>     </div>     <div class="cts">         <div class="tbox">             <input type="text" class="pp"/>         </div>     </div>     <div class="cts">         <div class="tarea">             <input type="text">         </div>     </div> </fieldset>  

$('.cts').find('div:first').each(function(i){     var attr = $(this).attr('class');     alert(attr)     switch(attr) {         case "tbox":             $('<div class="fieldproperties">        <input type="text" value="first" name="fields['+i+'].id" id="fields['+i+'].id"> </div>')                 .insertafter($('.cts').find('div.tbox'));             break;          case "tarea":             $('<div class="fieldproperties">        <input type="text" value="second" name="fields['+i+'].id" id="fields['+i+'].id"></div>')                 .insertafter($('.cts').find('div.tarea'));             break;     } }); 

here i'm trying insert <div class="properties"> after <div class="tbox"> , <div class="tarea"> latest <div class="properties"> here every div inserted. field properties loaded on every time

i'm getting below dom structure don't want this

<fieldset id="tt">     <div class="cts">         <div class="tbox">             <input type="text" class="pp">         </div><div class="fieldproperties"><input type="text" id="fields[2].id" name="fields[2].id" value="first"></div><div class="fieldproperties"><input type="text" id="fields[0].id" name="fields[0].id" value="first"></div>     </div>     <div class="cts">         <div class="tarea">             <input type="hidden">         </div><div class="fieldproperties"><input type="text" id="fields[3].id" name="fields[3].id" value="first"></div><div class="fieldproperties"><input type="text" id="fields[1].id" name="fields[1].id" value="first"></div>     </div>     <div class="cts">         <div class="tbox">             <input type="text" class="pp">         </div><div class="fieldproperties"><input type="text" id="fields[2].id" name="fields[2].id" value="first"></div><div class="fieldproperties"><input type="text" id="fields[0].id" name="fields[0].id" value="first"></div>     </div>     <div class="cts">         <div class="tarea">             <input type="hidden">         </div><div class="fieldproperties"><input type="text" id="fields[3].id" name="fields[3].id" value="first"></div><div class="fieldproperties"><input type="text" id="fields[1].id" name="fields[1].id" value="first"></div>     </div> </fieldset> 

i'm trying come dom structure

<fieldset id="tt">     <div class="cts">         <div class="tbox">             <input type="text" class="pp">         </div><div class="fieldproperties"><input type="text" id="fields[0].id" name="fields[0].id" value="first"></div>     </div>     <div class="cts">         <div class="tarea">             <input type="hidden">         </div><div class="fieldproperties"><input type="text" id="fields[1].id" name="fields[1].id" value="first"></div>     </div>     <div class="cts">         <div class="tbox">             <input type="text" class="pp">         </div><div class="fieldproperties"><input type="text" id="fields[2].id" name="fields[2].id" value="first"></div>     </div>     <div class="cts">         <div class="tarea">             <input type="hidden">         </div><div class="fieldproperties"><input type="text" id="fields[3].id" name="fields[3].id" value="first"></div>     </div> </fieldset> 

after clarifying in comments, think that's you're looking for:

jsfiddle demo

$('.cts').find('div.tbox, div.tarea').each(function(i) {      var val;      switch ($(this).attr("class"))     {          case ("tbox"):              val = "first";              break;          case ("tarea"):              val = "second";              break;     }      var properties =        $('<div class="fieldproperties">' +         '<input type="text" value="' + val + '" name="fields['+i+'].id" ' +         'id="fields['+i+'].id"> </div>');          properties.insertafter(this); });