Decrement row ID and Input ID & input Name after deleting dynamically added rows

Question

Newbie here, I have a dynamic add rows function. My target is to decrement the row id and name after I deleted it. The problems I am encountering is whenever i'm deleting a row, the id and name keeps incrementing when i add new one. It should reset or decrement. I have provided my codes below and a screenshot for more explanation. Thank you so much.

var rowIndex = 0;
var rowIndexx = 1;

$("#addrow").on('click', function() {

rowIndex++;
rowIndexx++;

var newRow = '<tr><td><input  type="text" value="' + rowIndexx + '" /></td>"' +
    '<td><input id="lightBand' + rowIndex + '" name="lightBand' + rowIndex + '" type="number" /></td>"' +
    '<td><input id="weight' + rowIndex + '" name="weight' + rowIndex + '" type="number" /></td>"' +
    '<td><input id="wingBand' + rowIndex + '" name="wingBand' + rowIndex + '" type="number" /></td>"' +
    '<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';

$("#applicanttable > tbody > tr:last").after(newRow);


});
// I'm missing something here, when I delete, the id and name should be decremented by 1.
$(document).on('click', '.removerow', function() {
$(this).parents('tr').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
   <thead>
  <tr>
  </tr>
   </thead>
   <tbody>
  <div class="row">
     <tr>
        <th>#</th>
        <th>LB#</th>
        <th>Weight#</th>
        <th>Wingband #</th>
        <th>Action</th>
     </tr>
     <tr id="row_0">
        <td>
           <input id="#" name="#" type="text" value="1" readonly />
        </td>
        <td class="labelcell">
           <input id="lightBand" name="lightBand" type="number" value="" class="auto"/>
        </td>
        <td class="labelcell">
           <input id="weight" name="weight" type="number" />
        </td>
        <td class="labelcell">
           <input id="wingBand" name="wingBand" type="number" />
        </td>
        <td class="labelcell">
           <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
        </td>
     </tr>
  </div>
   </tbody>
   </div>
   <tfoot>
  <tr>
  </tr>
  <tr>
     <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
  </tr>
   </tfoot>
</table>

Answer 1

Add Class auto_num in input field with display index no and after removing the row loop through this class so you can get the total count of that class. which is actually no of row and display it's count in that input field.

//var rowIndex = 0;
            //var rowIndexx = 1;
            
            $("#addrow").on('click', function(){ 
            
                let  rowIndex = $('.auto_num').length+1;
                let  rowIndexx = $('.auto_num').length+1;
            
                var newRow = '<tr><td><input class="auto_num"  type="text" value="'+rowIndexx+'" /></td>"' +
                                '<td><input id="lightBand'+rowIndex+'" name="lightBand'+rowIndex+'" type="number" /></td>"' +
                                '<td><input id="weight'+rowIndex+'" name="weight'+rowIndex+'" type="number" /></td>"' +
                                '<td><input id="wingBand'+rowIndex+'" name="wingBand'+rowIndex+'" type="number" /></td>"' +
                                '<td><input type="button" class="removerow" id="removerow'+rowIndex+'" name="removerow'+rowIndex+'" value="Remove"/></td>';
            
                $("#applicanttable > tbody > tr:last").after(newRow);               
            
            
            });
            // I'm missing something here, when I delete, the id and name should be decremented by 1.
            $(document).on('click', '.removerow', function() {
            $(this).parents('tr').remove();
            regenerate_auto_num();
            });
            function regenerate_auto_num(){
                let count  = 1;
                $(".auto_num").each(function(i,v){
                $(this).val(count);
                count++;
              })
            }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
  <thead>
    <tr>
    </tr>
  </thead>
     <tbody>
        <div class="row">
           <tr>
              <th>#</th>
              <th>LB#</th>
              <th>Weight#</th>
              <th>Wingband #</th>
              <th>Action</th>
           </tr>
           <tr id="row_0">
              <td>
                 <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
              </td>
              <td class="labelcell">
                 <input id="lightBand" name="lightBand" type="number" value="" class="auto"/>
              </td>
              <td class="labelcell">
                 <input id="weight" name="weight" type="number" />
              </td>
              <td class="labelcell">
                 <input id="wingBand" name="wingBand" type="number" />
              </td>
              <td class="labelcell">
                 <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
              </td>
           </tr>
        </div>
     </tbody>
     </div>
     <tfoot>
       <tr>
       </tr>
       <tr>
       <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
       </tr>
      </tfoot>                                        
 </table>

Answer 2

What happens when you add a new row, is that you set the value of the left-most input to the current value of rowIndexx. Once you have set it to that value, it will stay that value forever, regardless of the changes to the value of rowIndexx. If you want the id's to always count from 1 to 2 to 3 and so on, you should reset the fields in the click listener callback.