Обновить входное имя с помощью итерации и обновить форму при удалении

Question

Мне нужно создать HTML-форму, где пользователь может добавить новую строку, а затем удалить ее, если необходимо.

У меня это частично работает;Я могу добавить к столу и удалить к столу.Однако по определенным причинам мне нужно, чтобы каждая строка в таблице имела одинаковый номер итерации, например, [0], [1] для следующей строки и так далее.

Я пробовал разные методы, чтобы заставить это работать, но мои знания jquery в лучшем случае любительские!Я исследовал Интернет, и я не могу найти ничего, что решило бы мою проблему точно или связно.

  <table id="options-table">                    
    <tr>
      <td width="10">ID</td>
      <td>Name</td>
      <td>From</td>
      <td>Cost</td>
      <td></td>
    </tr>
    <tr>
      <td><input  name="number" type="text" value="0" /></td>
      <td><input class="one" name="name[" type="text" /></td>
      <td><input class="two" name="from[" type="text" /></td>
      <td><input class="three" name="cost[" type="text" /></td>                        
      <td><input type="button" class='del' value='Delete' /></td>
    </tr>                  
    <tr>
      <td><input name="number" type="text" value="1"  /></td>
      <td><input class="one" name="name[" type="text"  /></td>
      <td><input class="two" name="from[" type="text" /></td>
      <td><input class="three" name="cost[" type="text"  /></td>
      <td><input type="button" class="add" value="Add More" /></td>
    </tr>
  </table>

$('table').on('click', '.add', function(){
  $(this).val('Delete');
  $(this).attr('class','del');
  var appendTxt = "<tr><td><input name='number' type='text' /></td> <td><input class='one' name='name[' type='text' /></td> <td><input class='two' name='from[' type='text' /></td><td><input class='three' name='cost[' type='text' /> </td><td><input type='button' class='add' value='Add More' /></td></tr>";
  $("tr:last").after(appendTxt);    
    $("input[name='number']").each(function(ind) {
        $(this).val(ind + 1);
      });



$("input.one").each(function(i) {
  $(this).attr('name', $(this).attr('name') +i + ']');

});

Проблема, с которой я сталкиваюсь, заключается в том, что при удалении строки я снова получаю добавление числа с новым]

Это должна быть строка 1: имя[0], от [0], стоимость [0] и так далее.

Кто-нибудь, кто может точнее указать мне на то, на что я должен смотреть?веселит