So in a to-do list project, I wrote this:

 <table id="list">
      <tr>
        <span id="task" />
        <input id="inTask" placeholder="Add Task" />
      </tr>
    </table>
    <button id="addTask" type="button" onclick="addTask()">+</button>

Which is supposed to add an Input onclick, and show the previous input value above the input field. Here is the JavaScript function:

  function addTask() {
    let table = document.getElementById("list");
    let input =
      '<tr><span id="task" /><input id="inTask" placeholder="Add Task" /></tr>';

    let task = document.getElementById("inTask").value;

    if (task !== "") {
      document.getElementById("task").innerText = task;
      document.getElementById("list").innerHTML += input;

    }
  }

The problem is that when I add a task, the input field is added, but then when I type a task in the new input field, it show the value of the new input instead of the old, you can try it to understand: https://t3wth8.csb.app And I am out of ideas on how to fix that.