javascript - javascript を使用してテーブルから行を削除するときに DOM 値を保持する

Question

私が抱えている問題は、名前属性が連続するようにテーブル .outerHTML の残りの行を更新しようとするときです。.net バックエンドは、配列がゼロから始まり、連続していると想定しているため、これが必要です。

エントリのある行が複数ある場合は、行を削除します。outerHTML を更新すると、DOM 値が削除され、すべてが空白にリセットされます。入力した値を保持する方法はありますか? outerHTML を更新しなくても問題なく動作しますが、バックエンドでは機能しません。

https://jsfiddle.net/y2dxus1m/

    function addBenefit() {
      //gets the table and adds a new row based on length
      var tableRef = document.getElementById('benefitsField').getElementsByTagName('tbody')[0];
      var myHtmlContent = '<td><input name="Octopus.Newborns.ReceivingBenefits[' + tableRef.rows.length + '].FirstName"></td><td><input name="Octopus.Newborns.ReceivingBenefits[' + tableRef.rows.length + '].LastName"></td><td><input name="Octopus.Newborns.ReceivingBenefits[' + tableRef.rows.length + '].Amount"></td><td><input name="Octopus.Newborns.ReceivingBenefits[' + tableRef.rows.length + '].Source"></td><td><button class="btn btn-primary btn-sm" onclick="removeRow(this)">Remove</button></td>';
      var newRow = tableRef.insertRow(tableRef.rows.length);
      newRow.innerHTML = myHtmlContent;
    }

    function removeRow(a) {
      var row = a.parentNode.parentNode;
      row.parentNode.removeChild(row);
      var tableRef = document.getElementById('benefitsField').getElementsByTagName('tbody')[0];
      for (var i = 0; i < tableRef.rows.length; i++) {
        console.log(tableRef.rows[i].outerHTML)
        
        //Issue is here ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        tableRef.rows[i].outerHTML = tableRef.rows[i].outerHTML.replace(/(\[).+?(\])/g, "[" + i + "]");
        console.log(tableRef.rows[i].outerHTML)
      }
    }

<table class="deptTable" id="benefitsField">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Weekly Benefit Amount</th>
      <th>Source</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input name="Octopus.Newborns.ReceivingBenefits[0].FirstName" /></td>
      <td><input name="Octopus.Newborns.ReceivingBenefits[0].LastName" /></td>
      <td><input name="Octopus.Newborns.ReceivingBenefits[0].Amount" /></td>
      <td><input name="Octopus.Newborns.ReceivingBenefits[0].Source" /></td>
      <td><button class="btn btn-primary btn-sm" onclick="removeRow(this)">Remove</button></td>
    </tr>
  </tbody>
</table>
<button onclick="addBenefit()">Add</button>