Как добавить строку в повторяющийся список в javascript

Question

Привет, я пытаюсь создать список javascript todo и хотел бы иметь возможность провести строку через задачу, когда она будет завершена. Каждый раз, когда я пытаюсь добавить прослушиватель событий для изменения, он вычеркивает последний элемент в списке задач, независимо от того, когда я устанавливаю флажок. Может ли кто-нибудь указать мне в правильном направлении, пожалуйста. Вот код моего списка.

let theList = ["one", "two", "three"]
const todoList = document.querySelector(".todo-list");
const btnAdd = document.querySelector("#addNew");
const newItem = document.querySelector("#addItem");
btnAdd.addEventListener("click", function () {
  if (newItem.value) { // This means if newItem has a value the following function is perfomed
    theList.push(newItem.value); //pushes the newItem.value into theList.
    newItem.value = "";
    // this resets the todo add entry box to blank after the new todo is added.
  }
  build(); //This rebuilds the list after the new item is added
})

window.onload = build;


function build() {
  todoList.innerHTML = "<h2>Todays List</h2>";
  const tbl = document.createElement("table");
  for (let i = 0; i < theList.length; i++) {
    const row = document.createElement("tr");
    row.ind = i;

    // checkbox
    const checkboxHolder = document.createElement("td");
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.name = "checkbox";
    checkbox.id = "completed";
    checkboxHolder.appendChild(checkbox)
    row.appendChild(checkboxHolder);

    // list Item
    var listItem = document.createElement("td");
    listItem.innerHTML = theList[i];
    row.appendChild(listItem);

    // edit button - would also be good to add a keydown somewhere in hear when possible so I can use the return key to enter edits
    const editBtn = document.createElement("span");
    editBtn.innerText = "Edit";
    editBtn.style.padding = "5px";
    editBtn.addEventListener("click", function () {
      let tempEle = listItem;
      const newInput = document.createElement("input");
      newInput.value = tempEle.innerHTML;
      tempEle.innerText = "";
      tempEle.appendChild(newInput);
      newInput.focus();
      newInput.addEventListener("blur", function () {
        tempEle.innerHTML = newInput.value;
        theList[i] = newInput.value;
      })
      // I think the blur attribute means when it goes back to normal so the opposite of focus
    })
    row.appendChild(editBtn);

    // delete button
    const deleteBtn = document.createElement("span");
    deleteBtn.innerText = "Delete";
    deleteBtn.style.padding = "5px";
    deleteBtn.addEventListener("click", function () {
      var itemOut = theList.splice(i, 1);
      build();
    })
    row.appendChild(deleteBtn);

    tbl.appendChild(row);
  }
  todoList.appendChild(tbl)

}