Add / remove all text field id values

Question

How to set Add / Remove in all text field identifiers Auto increment (ItemCode, ItemName Add to +1 and Delete to -1.)

<div id="mainDiv"> <div class="one"> <div class="row"> <div class="input-field col s1"> <input type="text" id="sno" class="sno" name="Sr[]" value="1" > <label for="Sr" >Sr</label> </div> <div class="input-field col s2"> <input id="ItemCode" type="text" name="ItemCode[]" onKeyUp="showHint(this.value)"> <label for="ItemCode" >Item Code</label> </div> <div class="input-field col s2"> <input id="ItemName" type="text" name="ItemName[]" value=" "> <label for="ItemName" >Item Name</label> </div> <div class="input-field col s1 add"> <a href="#">Add</a> </div> <div class="input-field col s1 delete"> <a href="#">Remove</a> </div> </div> </div> </div> $(document).ready(function () { $(".add").click(function () { var length = $('.one').length; var cloned = $(this).closest('.one').clone(true); cloned.appendTo("#mainDiv").find('.sno').val(length + 1); cloned.find(':input:not(".sno")').val(" "); var parent = $(this).closest('.one'); }); $('.delete').click(function () { if($('.one').length==1){ alert("This is default row and can't deleted"); return false; } var parent = $(this).closest('.one'); $(this).parents(".one").remove(); // reset serial numbers again $('.sno').each(function(i){ this.value=i+1; }) }); }); 

https://jsfiddle.net/Nilesh_Patel/05e3wtcm/1/ here is an example

Answer 1

Here is what you can do. This will reset the identifier when deleted.

Since the for attribute of labels must be bound to the id inputs, you can also change them.

 $(document).ready(function () { $(".add").click(function () { var length = $('.one').length; var cloned = $(this).closest('.one').clone(true); cloned.appendTo("#mainDiv").find('.sno').val(length + 1); cloned.find(':input:not(".sno")').val(" "); cloned.find("label[for*='ItemCode']").attr('for', 'ItemCode' + (length+1)); cloned.find("input[id*='ItemCode']").attr('id', 'ItemCode' + (length+1)); cloned.find("label[for*='ItemName']").attr('for', 'ItemName' + (length+1)); cloned.find("input[id*='ItemName']").attr('id', 'ItemName' + (length+1)); var parent = $(this).closest('.one'); }); $('.delete').click(function () { if($('.one').length==1){ alert("This is default row and can't deleted"); return false; } var parent = $(this).closest('.one'); $(this).parents(".one").remove(); $('.one').each(function(index, item) { $(this).find('.sno').val(index+1); $(this).find("label[for*='ItemCode']").attr('for', 'ItemCode' + (index+1)); $(this).find("input[id*='ItemCode']").attr('id', 'ItemCode' + (index+1)); $(this).find("label[for*='ItemName']").attr('for', 'ItemName' + (index+1)); $(this).find("input[id*='ItemName']").attr('id', 'ItemName' + (index+1)); }); }); }); 

 <div id="mainDiv"> <div class="one"> <div class="row"> <div class="input-field col s1"> <input type="text" id="sno" class="sno" name="Sr[]" value="1" /> <label for="Sr" >Sr</label> </div> <div class="input-field col s2"> <input id="ItemCode" type="text" name="ItemCode[]" onKeyUp="showHint(this.value)" /> <label for="ItemCode" >Item Code</label> </div> <div class="input-field col s2"> <input id="ItemName" type="text" name="ItemName[]" value=" " /> <label for="ItemName" >Item Name</label> </div> <div class="input-field col s1 add"> <a href="#">Add</a> </div> <div class="input-field col s1 delete"> <a href="#">Remove</a> </div> </div> </div> </div> 

Answer 2

try adding this code to the add event

 cloned.find('input[name="ItemCode[]"]').attr('id','ItemCode'+(length + 1)); cloned.find('input[name="ItemName[]"]').attr('id','ItemName'+(length + 1)); 

Answer 3

You can reset serial numbers using the following function. check jsfiddle https://jsfiddle.net/05e3wtcm/4/

 function ResetSerialNumbers(){ $('.sno').each(function(i){ var val = i+1; this.value=val; $(this).closest('.row').find("input[id^='ItemCode']").first().attr("id",'ItemCode'+val); $(this).closest('.row').find("input[id^='ItemName']").first().attr("id",'ItemName'+val); }); }