How do I select all checkboxes from a list of checkboxes (eg: ToDo List)

I am trying to create a to-do list each item has a checkbox and I want to select each of these checkboxes when I click on them. If I click on any of them again the box should toggle between checked and unchecked depending on whichever box I click on.

I created this structure of input and an add button. When I click on the add button a table row gets added to the table(using appendChild). I created and appended the other elements required. So now when I click on the add button the table row displays correctly. It shows all the elements in it including the checkboxes.

The problem arises when I create multiple rows I can’t select all the checkboxes. It works perfectly fine if only one checkbox is present. But for more than one checkbox all of the checkboxes don’t get selected

const addButton = document.querySelector(".search_add_container button");
const table = document.querySelector("table");

addButton.addEventListener("click", function() {
  var inputValue = document.getElementById("inputContent");
  var tableRow = document.createElement("tr");
  var dataCell = document.createElement("td");
  var dataCellInnerContainer = document.createElement("div");
  dataCellInnerContainer.className = "data_cell_container";
  var tableCheckboxes = document.createElement("div");
  tableCheckboxes.className = "checkbox_box";
  var img = document.createElement("img");
  img.src = "starGrey.png";
  img.alt = "starGrey";
  var cellHeader = document.createElement("h5");
  cellHeader.className = "cell_header";
  var cellTent = document.createElement("h5");
  cellTent.className = "cell_tent";
  var time = document.createElement("p");



  if (inputValue.value == "") {
    alert("Please add a note!");
  } else {
    cellHeader.innerText = inputValue.value;
    cellTent.innerText = inputValue.value;
    time.innerText = new Date().toLocaleTimeString([], {
      hour: '2-digit',
      minute: "2-digit"
    });
    table.appendChild(tableRow);
    tableRow.appendChild(dataCell);
    dataCell.appendChild(dataCellInnerContainer);
    dataCellInnerContainer.appendChild(tableCheckboxes);
    dataCellInnerContainer.appendChild(img);
    dataCellInnerContainer.appendChild(cellHeader);
    dataCellInnerContainer.appendChild(cellTent);
    dataCellInnerContainer.appendChild(time);

    inputValue.value = "";

  }

  var checkboxes = document.querySelectorAll(".data_cell_container .checkbox_box");
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener("click", () => {
      if (checkbox.classList.contains("checked")) {
        checkbox.classList.remove("checked");
      } else {
        checkbox.classList.add("checked");
      }
    });
  });

  inputValue.value = "";
});

table {
  width: 100%;
}

tr td {
  position: relative;
  display: table-cell;
  vertical-align: center;
  border: 1px solid black;
}

td.checked {
  text-decoration: line-through;
}

.data_cell_container {
  position: relative;
  display: grid;
  grid-template-columns: 30px 30px calc(250px - 80px) auto 65px;
  grid-gap: 5px;
  padding: 5px 0 5px 20px;
}

.data_cell_container {
  position: relative;
  padding: 8px 20px;
}

.checkbox_box {
  position: relative;
  width: 16px;
  height: 16px;
  border: 2px solid #BABCBE;
  background-color: transparent;
  cursor: pointer;
}

.checkbox_box.checked::after {
  content: '';
  position: absolute;
  left: 3px;
  height: 4px;
  width: 10px;
  border-left: 2px solid #BABCBE;
  border-bottom: 2px solid #BABCBE;
  transform: rotate(-45deg);
  transform-origin: bottom;
}

.cell_header {
  max-width: calc(250px - 100px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell_tent {
  max-width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data_cell_container p {
  font-size: smaller;
  font-weight: bolder;
}

<header>
  <div class="search_add_container">
    <input type="text" placeholder="Add New List Item" id="inputContent">
    <img src="search.png" alt="searchicon">
    <button>Add</button>
  </div>
</header>

<div class="table_container">
  <table>

  </table>
</div>