Auto increment input box id when dynamically delete the table row

Question

I am able to dynamically create and delete the row of a table, but I need that when I delete the row then the Id of input field should be in sequential order. Suppose I have created a row and the id of "Item no" is 1 and again I created another row then the next id of "Item no" will be 2 and vice versa. But the case is that when we delete the "item no" of 5th id then the 6th id will be automatically change into 5th.

I have written the code of dynamically created and deleted the row but I need help for auto increment the id.

<table class="table table-hover poTable">
 <thead>
   <tr>
     <th class="col-md-1">
        Item No.
     </th>
     <th class="col-md-1">
        Fruit Code
     </th>
     <th>
        Fruit Name
     </th>
     <th>
        Unit Price
     </th>
     <th>
        UOM
     </th>
     <th>
        Order Quantity
     </th>
     <th>
        Amount
     </th>
     <th>
        Action
     </th>
   </tr>
</thead>
<tbody id="tableBody">
<!-- row -->
<tr class="first">
   <td>
     <input type="text" id="itemNo1" class="form-control" name="itemNumber"  value="10">
  </td>
  <td>
    <select class="form-control required" id="fruitCode1"  >
    <option>100</option>
    </select>
  </td>
  <td>
    <input type="text" id="fruitName1"  class="form-control required"  name="fName" value="mango">
  </td>
  <td>
    <input type="text" id="unitPrice1"  class="form-control required"   name="uPrice" value="100">
  </td>
  <td>
   <input type="text" id="uom1" class="form-control required"  name="uOM" value="kg">
  </td>
  <td>
   <input type="text" id="qty1" name="tQTY" class="form-control required " onchange="totalAmount();">
  </td>
  <td>
    <input type="text" id="total1" name="tPrice" class="form-control tAmountMain required" disabled>
   </td>
   <td>
     <p onclick="createTable();" style="cursor:pointer">Create</p>
   </td>
   </tr>
</tbody>

Now, here is my js code.

var counter= 1;
function createTable(){

counter++;

var itemNo = document.getElementById("itemNo1").value;
var fruitCode = document.getElementById("fruitCode1").value;
var fruitName = document.getElementById("fruitName1").value;
var unitPrice = document.getElementById("unitPrice1").value;
var uom = document.getElementById("uom1").value;
var qty = document.getElementById("qty1").value;
var amount = document.getElementById("total1").value;




$('#totalRowCount').text(counter-1);
var htmlText = '';
htmlText += '<tr class="first">';
htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="itemNo'+counter+'" class="form-control" name="itemNumber" value="'+itemNo+'">' ;
htmlText += '</td>';
htmlText += '<td>';
htmlText += '<select class="form-control" disabled  id="fruitCode'+counter+'">';
htmlText += '<option>'+fruitCode+'</option>';
htmlText += '</select>';
htmlText += '</td>';
htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="fruitName'+counter+'" class="form-control" name="itemNumber" disabled value="'+fruitName+'">' ;
htmlText += '</td>';
htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="unitPrice'+counter+'" class="form-control" name="itemNumber" disabled value="'+unitPrice+'">' ;
htmlText += '</td>';
htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="uom'+counter+'" class="form-control" name="itemNumber" disabled value="'+uom+'">' ;
htmlText += '</td>';
htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="qty'+counter+'" class="form-control" name="itemNumber" value="'+qty+'">' ;
htmlText += '</td>';
htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="total'+counter+'" class="form-control tAmount" name="itemNumber"  value="'+amount+'">' ;
htmlText += '</td>';
htmlText += '<td class="itemNumber">';
htmlText += ' <i class="icon-minus icon-2x minusIcon del" onclick="deleteRows();"></i>' ;
htmlText += '</td>';
htmlText += '</tr>';
htmlText += '</tbody>';
htmlText += '</table>';

$('#tableBody').append(htmlText);
var sum = 0;
$('.tAmount').each(function() {
sum += parseFloat($(this).val());
});
$('#grandTotal').val(sum)
}

function deleteRows(){

$('.del').click(function(){
      $(this).parent().parent().remove();
      var sum = 0;
$('.tAmount').each(function() {
    sum += parseFloat($(this).val());
});
$('#grandTotal').val(sum)
});

}

Answer 1

I would recoment you to introduce an attribute to the <tr> element like row-number="1", row-number="2" like that because your text box is editable and then you can write a function to update the row number always for create and delete

htmlText += '<tr class="first" row-number="' + counter +'">';
.....
.....
window.updateIds = function() {
    $.each($("[row-number]"), function(index, item){
        $(this).attr("row-number",(index+1));
        $("[id^=itemNo]", $(this)).attr("id", "itemNo"+(index+1));
    });
}

Call this function after you last line in both create and delete

$('#grandTotal').val(sum);
updateIds();

Check my JsFiddle http://jsfiddle.net/ZigmaEmpire/37tmwLev/

--EDIT--

To update the ID attribute you have to use the attribute starts with selector https://api.jquery.com/attribute-starts-with-selector/

$("[id^=itemNo]", $(this)).attr("id", "itemNo"+(index+1));

Check this JsFiddle http://jsfiddle.net/ZigmaEmpire/37tmwLev/1/

You don't have to maintain the total rows, you can get the number of rows with the code

var counter = $("[row-number]").length+1;

(or)

var counter = $("poTable tr").length+1;

Answer 2

You can recalculate the counter every time you delete a row:

var recalculate = function() {
   $('table.poTable').find('tbody > tr').each(function(index) {
      var newCount = index + 1;
      $(this).find('[id^=itemNo]').attr('id','itemNo' + newCount);
   });
}

$('.del').on('click', function() {
   $(this).closest('tr').remove();
   recalculate();
});