How to I get new values from dynamic table using JavaScript

Question

I want to create dynamic table that loads localStorage saved form data and make it editable.

I can change cells values but when I try to save it JavaScript console.log(); prints me old values.

When I inspect html values in cells that I have changed it looks okay, but still javascript gets old values that have been loaded from localStorage.

I just don't get it, am I supposed to refresh somehow javascript?

$(".table-add").click(function() {
    let TABLE = $("table");
    document.getElementById("load-local").className += " hide";
    let load = TABLE
        .find("tr.hide")
        .clone(true)
        .removeClass("hide table-line");
    TABLE.append(load);
});
$(".table-remove").click(function() {
    $(this)
        .parents("tr")
        .detach();
    document.getElementById("load-local").className = "table-add glyphicon glyphicon-refresh";
});

$(".table-save").click(function() {
  const userEdit = {};
  userEdit['fname'] = document.getElementById('fname').innerHTML;
  userEdit['lname'] = document.getElementById('lname').innerHTML;
  userEdit['email'] = document.getElementById('email').innerHTML;
  userEdit['phone'] = document.getElementById('phone').innerHTML;
  userEdit['gender'] = document.getElementById('gender').innerHTML;
  console.log(userEdit);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/table.css" />
<script src="js/table.js"></script>
<div class="container">
  <h1>HTML5 Editable Table</h1>
  <div id="table" class="table-editable">
    <span id="load-local" class="table-add glyphicon glyphicon-refresh"></span>
    <table class="table">
      <tr>
        <th>Imię</th>
        <th>Nazwisko</th>
        <th>Email</th>
        <th>Telefon</th>
        <th>Płeć</th>
        <th></th>
      </tr>
      <!-- This is our cloneable table line -->
      <tr class="hide">
        <td contenteditable="true" id="fname">Name</td>
        <td contenteditable="true" id="lname">Surname</td>
        <td contenteditable="true" id="email">[email protected]</td>
        <td contenteditable="true" id="phone">123123123</td>
        <td contenteditable="true" id="gender">other</td>
        <td>
          <span id="remove-local" class="table-remove glyphicon glyphicon-remove"></span>
        </td>
        <td>
          <span id="save-local" class="table-save glyphicon glyphicon-save"></span>
        </td>
      </tr>
    </table>
  </div>
</div>

Answer 1

IDs need to be unique

Use class and relative addressing

I simplified some more code. DOM access is ugly when mixed into jQuery

const $table = $("table");
$(".table-add").click(function() {
  $("#load-local").hide()
  let load =  $table
    .find("tr.hide")
    .clone(true)
    .removeClass("hide table-line");
   $table.append(load);
});
$(".table-remove").click(function() {
  $(this).closest("tr").remove()
  $("#load-local").show()
});

$(".table-save").click(function() {
  const userEdit = {}
  $(this).closest("tr").find("td[contenteditable]").each(function() {
    userEdit[this.className] = this.textContent
  })
  console.log(userEdit);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/table.css" />
<script src="js/table.js"></script>
<div class="container">
  <h1>HTML5 Editable Table</h1>
  <div id="table" class="table-editable">
    <span id="load-local" class="table-add glyphicon glyphicon-refresh"></span>
    <table class="table">
      <tr>
        <th>Imi?</th>
        <th>Nazwisko</th>
        <th>Email</th>
        <th>Telefon</th>
        <th>P?e?</th>
        <th></th>
      </tr>
      <!-- This is our cloneable table line -->
      <tr class="hide">
        <td contenteditable="true" class="fname">Name</td>
        <td contenteditable="true" class="lname">Surname</td>
        <td contenteditable="true" class="email">[email protected]</td>
        <td contenteditable="true" class="phone">123123123</td>
        <td contenteditable="true" class="gender">other</td>
        <td>
          <span id="remove-local" class="table-remove glyphicon glyphicon-remove"></span>
        </td>
        <td>
          <span id="save-local" class="table-save glyphicon glyphicon-save"></span>
        </td>
      </tr>
    </table>
  </div>
</div>