当我点击任何复选框添加待办事项css属性只适用于第一个元素。

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";
      }
    });
  });
}

个字符
我想当我点击添加待办事项css属性的复选框时，应该应用于其各自的待办事项。