Обновите динамически созданную HTML-таблицу JS после удаления строки

Question

У меня есть HTML-таблица, динамически создаваемая с помощью JavaScript. После заполнения некоторых полей нажатие кнопки «Добавить» добавляет новую строку в таблицу. После вставки нескольких строк в таблицу, форма отправляется на основной контроллер asp.net.

Для динамического создания таблицы я использую:

$("#btn-add").click(function () {
  var index = $('#tblItensPedido tr').length - 1
            var grife = $("#addGrife").val();
        var modelo = $("#addModelo").val();
        var cor = $("#addCor").val();
        var calibre = $("#addCalibre").val();
        var shape = $("#addShape").val();
        var quantidade = $("#addQuantidade").val();
        var valorTabela = $("#valorTabela").val();
        var valorTotal = $("#valorTotal").val();

  var markup = '<tr>\
                      <td>' + index + '</td>\
                      <td><input value="'+ grife + '" name="Itens[' + index + '].Grife" style="width:50px; border:none;"" readonly=readonly></input></td>\
                      <td><input value="'+ modelo + '" name="Itens[' + index + '].Modelo" style="width:55px; border:none;" readonly=readonly></input></td>\
                      <td><input value="'+ cor + '" name="Itens[' + index + '].Cor" style="width:50px; border:none;" readonly=readonly></input></td>\
                      <td><input value="'+ calibre + '" name="Itens[' + index + '].Tamanho" style="width:50px; border:none;" readonly=readonly></input></td>\
                      <td><input value="'+ shape + '" name="Itens[' + index + '].Shape" style="width:50px; border:none;" readonly=readonly></input></td>\
                      <td><input value="'+ quantidade + '" name="Itens[' + index + '].Quantidade" style="width:50px; border:none;" readonly=readonly></input></td>\
                      <td><input value="'+ valorTabela + '" name="Itens[' + index + '].ValorUnitario" style="width:100px; border:none;" id="currency" readonly=readonly></input></td>\
                      <td><input value="'+ valorTotal + '" style="width:100px; border:none;" readonly=readonly></input></td>\
                      <td><a class="btn btn-danger btn-sm btn-delete remover-linha" id="btn-deleta"><span class="fa fa-trash"></span></a></td>\
                      </tr>\ ';
        $("table tbody").append(markup);

)};

И для удаления строкив таблице я использую:

    $('#tblItensPedido').on('click', '.remover-linha', function () {
        var indexDoRow = $(this).closest('tr').index();
        console.log("index removido " + indexDoRow)

        $(this).closest('tr').remove();
        console.log('o index é ' + indexDoRow)
    });

Переменная «index» используется для создания индекса массива для таблицы, которая будет отправлять на сервер Itens[0].Grife, а для другой строки Index[1].Grife и т. д. ...

Работает нормально, но когда я удаляю строку в таблице, мне нужно обновить индекс, потому что, если я удаляю index[0] (первая строка), остальные строки начинаются синдекс [1] и сбой моего сервера.

Есть ли способ обновить весь индекс строк при удалении строки?

Спасибо