Как динамически добавить числовой порядок в jquery

Question

Мне сказали добавить числовой порядок в таблицу, но с условием, что когда вы добавляете таблицу, она начинает считать с нуля, а затем вы удаляете таблицу, она генерирует динамический порядок, а не 3-5 (если я удаляю 4), я имею в виду, что он должен поддерживать список заказов 1-2-3-4-5. У меня большой код, и я не хочу размещать его здесь. Просто у меня есть функция и

$('td.form_id').each(function(i) {
  $(this).text(i + 1);
});

Я хочу применить его к своей функции.

кратко о моей функции. У меня есть таблица со скрытым идентификатором, когда я нажимаю на нее, она показывает мне таблицу

<table id="tablo">
  <thead>
    <tr>
      <th></th>
      <th id="tab">Name</th>
      <th id="tab">surname</th>
      <th id="tab">string</th>

      <td>
        <input style="background-color:green; color: white; width: 135px" type="button" class="add" value="Əlavə+">
      </td>

    </tr>
    <tr hidden class="form_id">
      <td>
        <input type="text" style='width:250px'>
      </td>
      <td>
        <input type="text" style='width:250px'>
      </td>
      <td>
        <input type="text" style='width:250px'>
      </td>
      <td>
        <span><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>

    </tr>
  </tbody>

И функция, которая каждый раз отображает таблицу с помощью добавления чего-то вроде этого

$(document).ready(function() {

  $(".add").click(function() {

    //$("#td").show();
    var value = "<tr><td class='form_id' style='width:20px' >" + i + "</td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td><span ><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
    $("table tbody").append(value);

  });
});

Answer 1

 $(document).ready(function() {

  $(".add").click(function() {

    //$("#td").show();
    var value = "<tr><td class='form_id' style='width:20px' >" + i + "</td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td><span ><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
    $("table tbody").append(value);


    var i=1;
    $("tbody").find("tr").each(function(){
         $(this).find("td.form_id").html(i);
         i++
    });



  });
});