Как мне отредактировать / обновить значения в динамической таблице c, используя jQuery?

Question

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

Помимо входов, отображаемых в строке, я создал кнопка редактирования и удаления. В центре внимания этого вопроса будет кнопка редактирования. После нажатия кнопки редактирования необходимо вызвать модальное обновление с теми же полями, что и оригинальное модальное добавление. Пользователь должен иметь возможность изменять / обновлять информацию во всех 3 входах, и это должно динамически обновлять строку, для которой была нажата кнопка редактирования (каждая строка имеет свою собственную кнопку редактирования).

Как бы я go сделал это? Мой код 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

});

В существующем состоянии программа вызывает только модальное обновление (код 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>

Любая помощь будет принята с благодарностью! :)