Making a counter using JavaScript/JQuery clone method in an HTML table

I need to make a counter using JavaScript/JQuery with clone method in the second column like for example the first row 1 and when I click on add button it automatically display number 2. I am using clone method in JavaScript/JQuery and I don’t know how to add this. This is my full code:

var cloned = $('#myTable tr:last').clone();
$(".add-row").click(function(e) {
  e.preventDefault();
  cloned.clone().appendTo('#myTable');
});

$('#myTable').on('click', ".delete-row", function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
});

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-hover table-striped table-sm" id="myTable">
  <thead>
    <th></th>
    <th>#</th>
    <th>test1</th>
    <th>test2</th>
    <th>test3</th>
    <th>test4</th>
    <th>test5</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="#" class="btn btn-sm btn-danger delete-row">delete</a>
      </td>
      <td>
      <!-- Counter here -->
      </td>
    </tr>
  </tbody>
</table>
<a href="#" class="btn btn-sm btn-primary add-row">add</a>

Answer

Consider the following.

$(function() {
  function cloneLastRow(table) {
    var row = $("tr:last", table);
    var clone = row.clone();
    $("td:eq(1)", clone).html($("tbody tr", table).length + 1);
    clone.appendTo($("tbody", table));
  }

  function renumberTable(table) {
    var count = 1;
    $("tbody tr", table).each(function(i, row) {
      $("td:eq(1)", row).html(count++);
    });
  }

  $(".add-row").click(function() {
    cloneLastRow($("#myTable"));
  });

  $("#myTable tbody").on("click", ".delete-row", function() {
    var row = $(this).closest("tr");
    if (confirm("Are you sure you want to delete the Row?")) {
      row.fadeOut("slow", function() {
        row.remove();
        renumberTable($("#myTable"));
      });
    }
  })
});

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-hover table-striped table-sm" id="myTable">
  <thead>
    <th>&nbsp;</th>
    <th>#</th>
    <th>test1</th>
    <th>test2</th>
    <th>test3</th>
    <th>test4</th>
    <th>test5</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="#" class="btn btn-sm btn-danger delete-row">delete</a>
      </td>
      <td>
        1
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<a href="#" class="btn btn-sm btn-primary add-row">add</a>

There is no need for a Counter when you can just request the current length of a selector. For example, you can get the length of all the Rows in the Table Body. Initially, that is 1. The next one would be 2.

Now if the table has a unique start, lets say 20, then you would want to get that String value, cast it as an Integer, and increment that value.

$("td:eq(1)", clone).html(parseInt($("td:eq(1)", row).text()) + 1);

This would result in 21.

Update

Based on your comment, when you delete a row, you want the numbers to remain continuous. This means you need to redraw all or at least all further numbers.

function renumberTable(table){
  var count = 1;
  $("tbody tr", table).each(function(i, row){
    $("td:eq(1)", row).html(count++);
  });
}

You would then run this function directly after a Row was removed.