The function onclick in html gets called only on the first click, help me

I am trying to create a To do list, have done all things, but when I try to edit task, I am able to do it but when I try to edit the task again the function doesn’t get called. HELP!

I tried to fix it and look for solutions online but they didn’t help and I am a beginner only.
The to do list has the capability to edit, save and delete the tasks, but edit works only on the first time when the button is clicked.

const taskList = document.getElementById('task-list');
const taskInput = document.querySelector('input[type="text"]');

const addButton = document.getElementById('add-button');

window.onload = () =>{
  let savedTasks = localStorage.getItem('tasksList');
  taskList.innerHTML = savedTasks;
}

addButton.addEventListener('click' , ()=>{
    let title = taskInput.value;
    const taskElement = document.createElement('li');
    taskElement.classList.add('task');
      taskElement.innerHTML = `
        <input type="checkbox" onclick="window.checked()" class="checkBox">
        <span class = "title">${title}</span>
        <button class = "edit" onclick="edit()">Edit</button>
        <button class = "delete" onclick = "dlt()">Delete</button>
      `;
      taskList.appendChild(taskElement);
      taskInput.value = '';
      
      localStorage.setItem('tasksList', taskList.innerHTML);
});
    
const edit = ()=>{
  let parent = event.target.parentNode;

  let title = parent.querySelector('.title');
  title.contentEditable = true;
  title.focus();

  let editBtn = parent.querySelector('.edit');
  editBtn.innerText = 'Save';
  editBtn.addEventListener('click' , ()=>{
    title.contentEditable = false;
    editBtn.innerText = 'Edit';
    localStorage.setItem('tasksList', taskList.innerHTML);
  });

}

const dlt = ()=>{
  let parent = event.target.parentNode;
  parent.remove();
  localStorage.setItem('tasksList', taskList.innerHTML);
}

const checked = ()=>{
  let parent = event.target.parentNode;
  console.log(parent)
  let title = parent.querySelector('.title');
  if(parent.querySelector('.checkBox').checked){
    title.classList.add('checked');
  }
  if(!parent.querySelector('.checkBox').checked && title.classList.contains('checked')){
    title.classList.remove('checked');
  }

}



<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>To-Do List</title>
    <link rel="stylesheet" href="./style.css">
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1>To-Do List</h1>
      <input type="text" placeholder="Add new task">
      <button id="add-button">Add</button>
    <ul id="task-list">

    </ul>
  </body>
</html>