I want to edit and update the table I create with the button update.

I want something like this:
![](https://i.imgur.com/3lH4wud.png)

```js
function myFunction(){
  var table = document.getElementById("myTable");
  var row = table.insertRow(1);
  var rowFn = row.insertCell(0);
  var rowLn = row.insertCell(1);
  var tombol = row.insertCell(2); 
  var firstName = document.getElementById("firstName");
  var lastName = document.getElementById("lastName");
  createButton();
  rowFn.innerHTML = firstName.value;
  rowLn.innerHTML = lastName.value;
  firstName.value = "";
  lastName.value = "";
};
function createButton(){
  var td = document.querySelectorAll("td")[2];
  var btnDel = document.createElement("button");
  var btnUpdate = document.createElement("button");
  btnDel.innerHTML = "Delete";
  btnDel.setAttribute("onclick", "deleteFunction(this)");
  td.appendChild(btnDel);
  btnUpdate.innerHTML = "Update";
  btnUpdate.setAttribute("onclick", "updateFunction()");
  btnUpdate.setAttribute("style", "margin-left: 5px;");
  td.appendChild(btnUpdate);
}
```

```html
<form>
  First Name : <br>
  <input type="text" id="firstName"><br>
  Last Name : <br>
  <input type="text" id="lastName"><br>
</form>
<button onclick="myFunction()">Submit</button>
<table class="table" id="myTable">
  <tr>
    <th>Name</th>
    <th>Last Name</th>
    <th>Action</th>
  </tr>
</table>
```

I'm stuck to create the function, so please help me create the function.