jquery - Javascript Inserting a clone ordering issue -

i trying clone , insert items in order in js, can clone , add elements order seems incorrect, trying assign value radio buttons can tie radio buttons text fields seen below:

<div id='1'>             <div class="template">                 <div>                     <label class="right inline">response:</label>                 </div>                 <div>                     <input type="text" name="responsetext[]" value="" maxlength="400" />                 </div>                 <div>                     <input type="checkbox" name="responscheck[]" value="0" />                 </div>             </div>             <div>                 <input type="button" name="addnewrow" value="add row" />             </div>         </div> js:  var $counter = 0; var $template = $('.template'); $('input[type=button]').click(function() {     var $elem = $template.clone();     $elem.find("input:text").val("");     $copy.find("input:radio").val($counter);     $elem.insertafter($template); }); 

if add 3 rows example, values of checkbuttons in following order:

0 2 1 

i need values in following order:

0 1 2 

anybody got ideas? think must way inserting clone? when using radio buttons line seems work: $elem.insertafter($('#1 .clone').last());

but when using checkboxes doesn't seem work ideas?

to me problem looks on adding second entry $template still points first entry.

i try moving $template initialization inside click handler , changing below.

var $counter = 0; $('input[type=button]').click(function() {     var $template = $('.template:last'); }); 

this way $template should point last template inserted , should work expected.