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/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>