Javascript 为什么属性只应用于第一个元素而不是其各自的元素

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>