Why properties applying only on first element rather than its respective elements

Issue

When I click on any checkbox of added to-dos css property applies only on the first element.

const input = document.querySelector("#input");
const container = document.querySelector(".to_dos_container");
input.addEventListener("keyup", (event) => {
  if (event.key === "Enter") {
    add = `<div class="task_container">
    <input type="checkbox" class='done'>
    <p class='task'>${input.value}</p>
  </div>`;
    container.insertAdjacentHTML("afterbegin", add);
    input.value = "";
    lineThrough()
  }
});

function lineThrough() {
  var checked = document.querySelectorAll(".done");
  checked.forEach((c) => {
    c.addEventListener("click", (p) => {
      var task = document.querySelector(".task");
      if (c.checked) {
        task.style.textDecoration = "line-through";
        task.style.color = "gray";
      } else {
        task.style.textDecoration = "unset";
        task.style.color = "unset";
      }
    });
  });
}

<div class="text_area">
  <input type="checkbox" class="disabled" disabled>
  <input id="input" placeholder="Create a new todo..." type="text">
</div>
<div class="to_dos_container">
</div>

I want when I click on checkbox of added to-dos css property should apply on its respective to to-do.

Solution

document.querySelector(".task") selects the first element with the class .task. You need to use nextElementSibling to select the element that follows the element with class .task, since there is only two sibling elements inside the div it will select the corresponding checkbox.

Change this

var task = document.querySelector(".task");

To this

var task = c.nextElementSibling;

Answered By - Jacob