new added elements are not working well in js, why?

Question

I have a to-do item list that has two default items (running, studying). there are two buttons for each item (done button and del button). done button is for putting a line through the done item and del button is for removing the item. buttons of default items work well but when I add new item to my list , the events on new item's buttons do not work.

HTML :

<div class="todo">
    <div class="todo_title">
        <h1>ToDo App</h1>
    </div>
    <div class="todo_adding-work">
        <input class="added-work" type="text" placeholder="write your work to be added">
        <button class="add-btn">&#43</button>
    </div>
    <div class="todo_item-list">
        <div class="todo_item-wrapper">
            <div class="todo_item">running</div>
            <button class="todo_done-btn">done</button>
            <button class="todo_del-btn">del</button>
        </div>
        <div class="todo_item-wrapper">
            <div class="todo_item">studying</div>
            <button class="todo_done-btn">done</button>
            <button class="todo_del-btn">del</button>
        </div>
    </div>
</div>

JS :

const addBtn = document.querySelector(".add-btn");
const itemList = document.querySelector(".todo_item-list");
const doneButton = document.querySelectorAll(".todo_done-btn");
const delButton = document.querySelectorAll(".todo_del-btn");
const todoItem = document.querySelectorAll(".todo_item");
const itemsWrapper = document.querySelectorAll(".todo_item-wrapper")

addBtn.addEventListener("click", (e) => {
  let inputText = document.querySelector(".added-work").value;
  let txt = document.createTextNode(inputText);
  let newItem = document.createElement("div");
  newItem.className = "todo_item";
  newItem.append(txt);
  if (inputText === "") {
    alert("you must write something");
  } else {
    let doneBtn = document.createElement("button");
    doneBtn.className = "todo_done-btn";
    doneBtn.innerText = "done";

    let delBtn = document.createElement("button");
    delBtn.className = "todo_del-btn";
    delBtn.innerText = "del";

    let itemWrapper = document.createElement("div");
    itemWrapper.className = "todo_item-wrapper";
    itemWrapper.append(newItem, doneBtn, delBtn);
    itemList.append(itemWrapper);
  }
  document.querySelector(".added-work").value = "";
});

doneButton.forEach((e, idx) => {
  e.addEventListener("click",(el) => {
      lineTh(todoItem[idx])
  }, false);
});
function lineTh(el) {
    el.classList.toggle('todo_item--done')
}

delButton.forEach((e, idx) => {
    e.addEventListener('click',(el) => {
        delItem(itemsWrapper[idx]);
    }, false)
})
function delItem(el) {
    el.remove();
}