add/remove all textbox id increment

Question

How to Set Add/remove in all text-box id Auto increment (ItemCode,ItemName Add To +1 And Remove 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 example

Answer 1

try to add this code to your add event

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

Answer 2

Here is what you can do. This will reset the id's on delete as well.

Since the for attribute of the labels should be bound to the inputs id you may want to change those as well.

$(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 3

You can reset the serial numbers using the following function. check the 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);
});
}