jQuery, increment id number when dynamically appending elements
http://stackoverflow.com/questions/23700005/jquery-increment-id-number-when-dynamically-appending-elements
HTML
<div id="addresses">
<div class="address" id="address0">
<div class="street">
<input type="text" name="street[]" />
</div>
<div class="city">
<input type="text" name="city[]" />
</div>
<div class="addmoreadd">
<button type="button" class="addmore">Add More Address</button>
</div>
</div>
</div>
JavaScript
var rowNum = 0;
$("body").on("click", ".addmore", function() {
rowNum++;
var $address = $(this).parents('.address');
var nextHtml = $address.clone();
nextHtml.attr('id', 'address' + rowNum);
var hasRmBtn = $('.rmbtn', nextHtml).length > 0;
if (!hasRmBtn) {
var rm = "<button type='button' class='rmbtn'>Remove</button>"
$('.addmoreadd', nextHtml).append(rm);
}
$address.after(nextHtml);
});
$("body").on("click", ".rmbtn", function() {
$(this).parents('.address').remove();
});