I have created a todo-apps with js but I have a problem : when I am clicking on the check button to do someting or on the edit button or the time button all tasks are changed : for example when I click on the check button on « learn js » I want that just this task changed ( underline) but when I do that all my tasks become underline. I know this is a beginner question sorry. This is my HTML code :

To Do List


   

     

    
   Clear Items

This is my JS code :

let clear  =  document.getElementById("btn");
let add = document.getElementById("addItem");
let choices = [];
let vide = document.getElementById('p');
var choice = document.getElementById("Name").value;
let invalid = document.getElementById("invalid");

function main() {
add.addEventListener('click', function() {
addItems();
})
}

function addItems() {
   choice = document.getElementById("Name").value;

    vide.innerHTML += choice;
   choices.push(choice);
   document.getElementById('p').insertAdjacentHTML('beforeend', ``);
   document.getElementById('p').insertAdjacentHTML( 'beforeend', ``);
  document.getElementById('p').insertAdjacentHTML( 'beforeend', ``);
  vide.insertAdjacentHTML('beforeend', `

`);
   document.getElementById('p').classList.add('listClass');

   document.getElementById('check').onclick = function() {
  document.getElementById('p').classList.toggle("done");
            document.getElementById('check').classList.toggle('opacity');
    };
    document.querySelector('#null').onclick = function() {
      vide.innerHTML ='';
    };
document.getElementById('edit').onclick = function() {
  // I have not finished this part
 }
 }
 }

main();

This is a picture of the result :