In my To do App my edit, save, delete and checkbox button are not firing

Question

I am really new to javascript and I have a to-do app to do for a coding Bootcamp project. I need to have the following done:

-create a task with a due date -edit and delete task -mark task complete -sort the task in ascending order -do a localstorage of the list

Currently, my edit and delete buttons are not working. They are tied to the IDs that are generated to the task ID that is created.

I can't move on until the buttons have been fixed, I am hoping you guys could help,

Is there any more information you need?

You can find the runnable code in the link below:

elements.list.addEventListener("click", (event) => {
  const { target } = event;
  const { id } = target.dataset;
  const tasks = id ? document.querySelector('[data-id="${id}"]') : null;
  const sort = document.querySelector(".sort");

  const type = {
    edit: event.target.classList.contains("edit"),
    delete: event.target.classList.contains("delete"),
  };

  const isFromSaveLabel = target.innerText.toLowerCase() === "save";

  if (tasks && type.edit && isFromSaveLabel) {
    const text = task.querySelector("text");
    target.innerText = "Edit";
    text.addAttribute("readonly");
    return;
  }

  if (tasks && type.edit) {
    const text = task.querySelector("text");
    target.innerText = "save";
    text.removeAttribute("readonly");
    text.focus();
    return;
  }

  if (tasks && type.delete) {
    return;
  }
});

const submitHandler = (event) => {
  event.preventDefault();
  createTask();
};

elements.form.addEventListener("submit", submitHandler);

https://codepen.io/Blazeinferno92/pen/ExodYON