javascript - Add one div at a time, or delete duplicates fields -

i have part of project i'm working on in have add repeated instances of same div. works, however, instead of adding individual instances, previous div added seems repeating itself, rather having "original div" adding.

here jsfiddle code i'm using far:

 <div class="shape" id="plan4_shape">          <span class="bakkant">          <input class="measures" id="plan4_width" placeholder="mm" name="p4width" value="w1"/>          <span class="times"> &times;</span>          <input class="measures" id="plan4_width" placeholder="mm" name="p4length" value="l1" />          </span>           <script id="template" type="text/template">              <span class="bakkant" id="bakkant">              <input class="measures" id="plan4_width" placeholder="mm" name="p4width" value="w"/>              <span class="times"> &times;</span>              <input class="measures" id="plan4_width" placeholder="mm" name="p4length" value="l" />              <button class="close" id="close">&times;</button>              </span>             </script>             <button type="button" name="add_row" class="addrow" id="addrow4" onclick="addrow()">add row</button>             <textarea name="more_info" id="profiles" placeholder="beskriv fritt, vilka kanter du vill få profilerade."></textarea> </div> 

jquery code

$(function() {   var = 0;   $('#addrow4').click(function() {     var $clone = $($('#template').html());     $clone.attr('id', "bakkant" + ++i);      $clone.find('p').attr("bob" + ++i)     $clone.find('input').attr('value', "l" + ++i);     $clone.find('input').attr('value', "w" + ++i);     $('.bakkant').append($clone);   });    $('.shape').on('click', '.close', function() {     $(this).closest('.bakkant').remove();   }); }); 

as need add new row @ last, need do

 $('.bakkant').last().append($clone); 

you need not ++i changing every id or value attribute, increment once each event.

working fiddle here.