Почему не сохраняется текст ячейки в инпуте для редактирования колонок HTML-таблицы?

Код работает, только не корректно проходит редактирование ячейки, после загрузки страницы при первом клике не сохраняется текст ячейки в input. Вводишь новый текст тогда все работает правильно. В чем дело, где ошибки?

<div id="parent">
  <table id="table"></table>
  <input id="employee" type="text" placeholder="Name" />
  <input id="age" type="text" placeholder="age" />
  <input id="salary" type="text" placeholder="salary" />
  <button>Add new employee</button>
</div>

 <script>
  let employees = [
    { name: "employee1", age: 30, salary: 400 },
    { name: "employee2", age: 31, salary: 500 },
    { name: "employee3", age: 32, salary: 600 },
  ];

  let table = document.querySelector("#parent #table");
  let tr;
  let td;

  for (let elem of employees) {
    tr = document.createElement("tr");
    table.appendChild(tr);
    for (let key in elem) {
      AddInput(elem[key]);
    }
    AddLink(tr);
  }

  function AddLink(tr) {
    let td = document.createElement("td");
    tr.appendChild(td);
    let remove = document.createElement("a");
    remove.href = "";
    remove.textContent = "remove";
    td.appendChild(remove);
    remove.addEventListener("click", function (event) {
      tr.remove();
      event.preventDefault();
    });
  }
  function AddInput(x) {
    td = document.createElement("td");
    td.textContent = x;
    tr.appendChild(td);

    let tds = document.querySelectorAll("td");
    for (let cell of tds) {
      if (cell.textContent !== "remove") {
        cell.addEventListener("click", function f() {
          let inp = document.createElement("input");
          inp.value = cell.textContent;
          cell.textContent = "";
          cell.appendChild(inp);

          inp.addEventListener("blur", function () {
            cell.textContent = this.value;
            cell.addEventListener("click", f);
          });
          cell.removeEventListener("click", f);
        });
      }
    }
  }

  let inputs = document.querySelectorAll("input");
  let btn = document.querySelector("button");

  btn.addEventListener("click", function () {
    tr = document.createElement("tr");
    table.appendChild(tr);
    for (let input of inputs) {
      AddInput(input.value);
    }
    AddLink(tr);
  });
</script>