javascript - lägg till/ta bort alla textbox-id på ökning

Hur man ställer in lägga till/ta bort i alla textbox-ID med autoökning (ItemCode, ItemName Lägg till +1 och Ta bort till -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/ här exempel

Svar #1

försök att lägga till denna kod i din lägg till-händelse

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

Svar #2

Här är vad du kan göra. Detta kommer också att återställa id:na vid borttagning.

Eftersom for-attributet för etiketterna bör bindas till inputarnas id kan du också vilja ändra dessa.

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