Javascript 如何使用jQuery编辑/更新动态表中的值？

我有一个程序，它通过将用户的输入输入一个模式来接受用户的输入，完成后，用户单击一个按钮，将所有输入添加到表行中各自的列中。用户可以根据需要添加任意多的行，并提供不同的信息。输入如下：通过文件类型输入的图像，以及两个文本输入，一个输入姓名，另一个输入姓氏

除了行中显示的输入之外，我还创建了一个编辑和删除按钮。此问题的焦点将放在编辑按钮上。按下“编辑”按钮后，需要显示一个更新模式，其字段与原始添加模式相同。用户应该能够更改/更新所有3个输入中的信息，这应该动态更新已按下编辑按钮的行（每行都有自己的编辑按钮）

我该怎么做呢？我的jQuery代码如下：

//add data
$("#addToTable").click(function() {

  var imageLocation = $("#insertImage").val().replace(/C:\\fakepath\\/i, "images/");

  counter++;

  $("#container table").append(
    $('<tr id="' + counter + '">')


    //below is the image input
    .append($('<td class="align-middle">').html("<img src=" + imageLocation + " class='image' data-toggle='popover'" + "data-img=" + imageLocation + ">").on("mouseover", function() {
      $('[data-toggle="popover"]').popover({
        trigger: 'hover',
        html: true,
        content: function() {
          return '<img class="img-fluid" src="' + $(this).data('img') + '" />';
        },
        title: 'Enlarged Image'
      })
    }))
    .append($('<td class="align-middle">').html($('#addName').val())) //the name input

    .append($('<td class="align-middle">').html($('#addSurname').val())) //the surname input

    .append($('<td class="align-middle">').html("<i class='fas fa-user-edit faa-shake animated-hover' id='pencilIcon'></i></button>").on("click", function() {
      $('#updateDataOnTable').modal("toggle"); // this brings up the update modal once the edit button has been pressed.
    }))

    .append($('<td class="align-middle">').html("<i class='fas fa-dumpster faa-shake animated-hover' id='dumpsterIcon'></i>").on("click", function() {
      let deleteRow = this;
      $('#modalDelete').modal("toggle");

      $('#no').on("click", function() {
        $('#modalDelete').modal("toggle");
        deleteRow = "";
      })

      $('#yes').on("click", function() {
        $(deleteRow).parents("tr").remove();
        $('#modalDelete').modal("toggle");
      })
    }))

  )
  formClear(); //clears the inputs

});

//添加数据
$（“#添加表”）。单击（函数（）{
var imageLocation=$（“#insertImage”）.val（）.replace（/C:\\fakepath\\/i，“images/”）；
计数器++；
$（“#容器表”）。追加(
$('')
//下面是图像输入
.append（$（“”）.html（“”）.on（“鼠标悬停”，函数（）{
$（'[data toggle=“popover”]'）。popover({
触发器：“悬停”，
是的，
内容：函数（）{
返回“”；
},
标题：“放大图像”
})
}))
.append（$（''）.html（$（'#addName'）.val（））//名称输入
.append（$（''）.html（$（'#addlasname'）.val（））//姓氏输入
.append（$（''）.html（''）.on（“单击”，函数（）{
$（“#updateDataTable”）.modal（“toggle”）；//一旦按下编辑按钮，就会显示更新模式。
}))
.append（$（''）.html（''）.on（“单击”，函数（）{
让deleteRow=this；
$（'modalDelete'）。模态（“切换”）；
$（'#否'）。在（“单击”，函数（）上）{
$（'modalDelete'）。模态（“切换”）；
deleteRow=“”；
})
$（'#yes'）。在（“单击”，函数（）上）{
$（deleteRow）.parents（“tr”）.remove（）；
$（'modalDelete'）。模态（“切换”）；
})
}))
)
formClear（）；//清除输入
});

目前，程序仅显示更新模式（HTML代码如下所示）：

更新表
&时代；
插入图像
名称
姓
更新

任何帮助都将不胜感激！：）

  <!-- Update Modal -->

  <div class="modal fade" id="updateDataOnTable" tabindex="-1" role="dialog" aria-labelledby="website" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Update Table</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form class="" action="index.html" method="post">
            <form>
              <div class="form-group">
                <label for="updateImage">Insert Image</label>
                <input type="file" class="form-control-file" data-toggle="popover" data-html="true" data-placement="bottom" name="insertImage" id="updateImage" accept="image/x-png,image/gif,image/jpeg" aria-describedby="inputHelp">
              </div>
              <div class="form-group">
                <label for="updateName">Name</label>
                <input type="text" class="form-control" id="updateName">
              </div>
              <div class="form-group">
                <label for="updateSurname">Surname</label>
                <input type="text" class="form-control" id="updateSurname">
              </div>
            </form>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" id="updateTable" value=id>Update</button>
        </div>
      </div>
    </div>
  </div>