如何在Crud上创建简单的编辑按钮？

Question

我正在为我的作业做一个简单的克鲁德。除了“编辑”按钮外，我的大部分代码在大多数情况下都能正常工作。它仅编辑第一行。在下面，我提供了我的TS代码以及HTML。对于HTML，我正在使用模式窗口。因此，每次我单击编辑按钮时。将会出现模态

function create() {
  let user: string = String($("#username").val());
  let data: JQuery = $("<tr id='crudData'><td>" + user + "</td><td><button class='btn btn-info' data-toggle='modal' data-target='#crudModal'>Bearbeiten</button></td></tr>");
  $("#crud").append(data);
}


function edit() {
  let user2: string = String($("#username2").val());
  let data2: JQuery = $("<tr id='crudData'><td>" + user2 + "</td><td><button class='btn btn-info' data-toggle='modal' data-target='#crudModal'>Bearbeiten</button></td></tr>");
  $("#crudData").replaceWith(data2);
}

$("#userbstg").on("click", create);
$("#saveEdit").on("click", edit);

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <h3 class="section-heading">Aufgabe - Usermanager</h3>
        <label for="username">Username:</label>
        <input id="username" class="form-control col-md-3" type="text">
        <button id="userbstg" class="btn btn-info">Add</button>
        <table id="crud" class="col-md-4 table">
          <tr>
            <th class="col-2" id="user">User</th>
            <th class="col-2" id="edit"></th>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div class="modal fade" id="crudModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <label for="username2">Username:</label>
          <input id="username2" class="form-control col-md-12" type="text">
          <button type="button" id="saveEdit" class="btn btn-default" data-dismiss="modal">Save</button>
        </div>
      </div>
    </div>
  </div>
</section>