How i get serial no in the dynamic table when i click add button in codeigniter

Question

This is dynamic table pic: My problem is when I click the + button, Sno number should be incremented and then presented in the text box of the table. I have so far tried but I don't achieve any answer. Please help me to solve this problem and thanks

View page code:

<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th>Rate</th>
<th>Item Name</th>
<th>Qty</th>
<th>Weight</th>
<th>Total</th>
<th></th></tr>
</thead>
<tbody>

    <tr >
        <td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove' id="remove"></span></a></td>

        <td><input style="width:50px"  type="text" name="sno[]" value="1"></td>

        <td><input style="width:100px" class ="rate" type="text"  name="rate[]"></td>

        <td><select  style="height: 28px; width:250px; " id="select" class="countries" name="itemname[]"><option></option>
<?php foreach ($itemname as $row ): ?> 
<option value="<?=$row['id']?>" <?php echo set_select('itemname', $row['id']); ?>><?=$row['itemname']?></option> 
<?php endforeach ?>
</select></td>

        <td><input style="width:60px"  class="qty" type="text"  name="qty[]"></td>

        <td><input style="width:70px" class="unit" type="text"  name="unit[]"></td>

        <td><input style="width:100px" class="total" type="text" name="total[]"></td>

        <td><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus"></td>

</tr>
</tbody>
</table>

Javascript code to add rows and delete rows:

<script>
$(function(){
   $('#addMore').on('click', function() {
        var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
        data.find("input").val('');
});
  $(document).on('click', '.remove', function() {
        var trIndex = $(this).closest("tr").index();
          if(trIndex>0) {
             $(this).closest("tr").remove();
             $('.qty').trigger('change');
} else {
        alert("Sorry!! Can't remove first row!");
}
});
});      
</script>

Answer 1

Add some to JS code:

   $('.addMore').on('click', function() {
        var data = $(this)
                      .parent()
                      .parent()
                      .last('tr')
                      .clone(true)
                      .appendTo($('#tb3').find('tbody'));
        data.find("input").val('');

        var l = $('#tb3').find('tbody').find('tr').length;
        var s = $('#tb3')
                .find('tbody')
                .find('tr')
                .eq(l-2)
                .find('td')
                .eq(1)
                .find('input')
                .val();

        var sp = Number(s) + 1;
        data.find('td').eq(1).find("input").val(sp); 
 });

or

$('.addMore').on('click', function() {
    var data = $(this)
                  .parent()
                  .parent()
                  .last('tr')
                  .clone(true)
                  .appendTo($('#tb3').find('tbody'));

    data.find("input").val('');

    var s = data
              .prev()
              .find('td')
              .eq(1)
              .find('input')
              .val(); 
    var sp = Number(s) + 1;

    data
        .find('td')
        .eq(1)
        .find("input")
        .val(sp);  
});

Also, change id of AddButton to a class.

$(function(){
   $('.addMore').on('click', function() {
        var data = $(this)
                      .parent()
                      .parent()
                      .last('tr')
                      .clone(true)
                      .appendTo($('#tb3').find('tbody'));
        data.find("input").val('');
        
        var l = $('#tb3').find('tbody').find('tr').length;
        var s = $('#tb3')
                .find('tbody')
                .find('tr')
                .eq(l-2)
                .find('td')
                .eq(1)
                .find('input')
                .val();
      
        var sp = Number(s) + 1;
        data.find('td').eq(1).find("input").val(sp);  
  });
  $(document).on('click', '.remove', function() {
        var trIndex = $(this).closest("tr").index();
          if(trIndex>0) {
             $(this).closest("tr").remove();
             $('.qty').trigger('change');
          } else {
                alert("Sorry!! Can't remove first row!");
          }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th>Rate</th>
<th>Item Name</th>
<th>Qty</th>
<th>Weight</th>
<th>Total</th>
<th></th></tr>
</thead>
<tbody>

    <tr >
        <td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove' id="remove"></span></a></td>

        <td><input style="width:50px"  type="text" name="sno[]" value="1"></td>

        <td><input style="width:100px" class ="rate" type="text"  name="rate[]"></td>

        <td><select  style="height: 28px; width:250px; " id="select" class="countries" name="itemname[]"><option></option>
 
<option value="23423">itemname</option> 
<?php endforeach ?>
</select></td>

        <td><input style="width:60px"  class="qty" type="text"  name="qty[]"></td>

        <td><input style="width:70px" class="unit" type="text"  name="unit[]"></td>

        <td><input style="width:100px" class="total" type="text" name="total[]"></td>

        <td><a href="javascript:void(0);" style="font-size:18px;" class="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus">Add</span></td>

</tr>
</tbody>
</table>

Answer 2

Set class name for sno[] input field

For example :

<td><input style="width:50px" class="sno" type="text" name="sno[]" value="1"></td>.

Call the ApplySerialNO() function in add row and remove row function

$('#addMore').on('click', function() {
        var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
        data.find("input").val('');

        ApplySerialNO();
});

$(document).on('click', '.remove', function() {
    var trIndex = $(this).closest("tr").index();
    if(trIndex>0) {
        $(this).closest("tr").remove();
        $('.qty').trigger('change');

        ApplySerialNO();
    } else {
        alert("Sorry!! Can't remove first row!");
    }
});

This function is clear the old value and append the new serial no

function ApplySerialNO() {
    var count = 1;

    $(".sno").each(function() {
        var selectedTr = $(this);
        selectedTr.val('');
        selectedTr.val(count);
        count++;
    });
}