Некорректно обрабатывается событие на чекбоксе после выгрузки из localstorage

[TheHateInMe]

Всем здравствуйте. Благодаря подсказке из своего прошлого вопроса научился при нажатии на checkbox удалять строку таблицы, в котором он находился. Но моя задача усложнилась - после каждой манипуляции я загружаю актуальную таблицу в localstorage. С этим все ОК. Далее я обновляю страницу и забираю из хранилища свою таблицу (ну чтобы данные не потерялись) - тут тоже все супер. Но событие на checkbox при этом теряется и я пытаюсь объявить его снова с помощью той же конструкции, которая успешно срабатывает при добавлении элементов таблицу. Вот этот кусочек:

var ShoppingList = localStorage.getItem('ShoppingList'); //тут я получаю всю табличку
    if (ShoppingList !== null) {
        document.getElementById('myTable').innerHTML = ShoppingList;
    }
        var checkbox = document.getElementById('checkbox_id'); //тут я получаю конкретно чекбокс
    checkbox.addEventListener("click", function (elemCheck) { // ну а тут я вроде как должен присвоить ему событие
        var checkboxElement = elemCheck.target;
        var elCheck = checkboxElement.parentElement.parentElement;
        elCheck.parentElement.removeChild(elCheck);
        localStorage.setItem("ShoppingList", document.getElementById("myTable").innerHTML); // и кладу обратно в хранилище
    });

Но после F5 первая строка таблицы удаляется, а на остальных кликанье по чекбоксу ни к чему не приводит. Почему так происходит? В чем мой косяк? Уже совсем запутался. Подскажите пожалуйста. Более полный листинг прилагаю. Спасибо.

main.js

function insertRow(id) {
  var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
  var row;
  row = document.createElement("tr");
  row.setAttribute("id", "tr_id");
  var cellCounter = document.getElementById("myTable").rows.length;

  var td1 = document.createElement("td");
  td1.setAttribute("id", "td1_id");
  td1.appendChild(document.createTextNode(cellCounter));

  var td2 = document.createElement("td");
  td2.setAttribute("id", "td2_id");
  var checkbox = document.createElement("input");
  checkbox.setAttribute("type", "checkbox");
  checkbox.setAttribute("id", "checkbox_id");
  checkbox.addEventListener("click", function(elemCheck) {
    var checkboxElement = elemCheck.target;
    var elCheck = checkboxElement.parentElement.parentElement;
    elCheck.parentElement.removeChild(elCheck);
    localStorage.setItem("ShoppingList", document.getElementById("myTable").innerHTML);
  });
  td2.appendChild(checkbox);

  var td3 = document.createElement("td");
  td3.setAttribute("id", "td3_id");
  td3.appendChild(document.createTextNode(document.getElementById("add_id").value));

  var td4 = document.createElement("td");
  td4.setAttribute("id", "td4_id");
  td4.appendChild(document.createTextNode(document.getElementById("quant_id").value));

  var td5 = document.createElement("td");
  td5.setAttribute("id", "td5_id");
  td5.appendChild(document.createTextNode(document.getElementById("price_id").value));

  var td6 = document.createElement("td");
  td6.setAttribute("id", "td6_id");
  var btnEdit = document.createElement("input");
  btnEdit.setAttribute("class", "btnEdit");
  btnEdit.src = "icons/edit.png";
  btnEdit.type = "image";
  btnEdit.addEventListener('click', function() {
    editButton();
    return false;
  });
  td6.appendChild(btnEdit);

  var deleteButton = document.createElement("input");
  deleteButton.setAttribute("class", "deleteButton");
  deleteButton.src = "icons/delete.png";
  deleteButton.type = "image";
  deleteButton.addEventListener('click', function(elemDel) {
    var deleteElement = elemDel.target;
    var elDel = deleteElement.parentElement.parentElement;
    elDel.parentElement.removeChild(elDel);
    localStorage.setItem("ShoppingList", document.getElementById("myTable").innerHTML);
  });
  td6.appendChild(deleteButton);
  td6.setAttribute("colspan", "2");
  row.appendChild(td1);
  row.appendChild(td2);
  row.appendChild(td3);
  row.appendChild(td4);
  row.appendChild(td5);
  row.appendChild(td6);
  tbody.appendChild(row);

  localStorage.setItem("ShoppingList", document.getElementById("myTable").innerHTML);
}

function indexLS() {
  var ShoppingList = localStorage.getItem('ShoppingList');
  if (ShoppingList !== null) {
    document.getElementById('myTable').innerHTML = ShoppingList;
  }
  var checkbox = document.getElementById('checkbox_id');
  checkbox.addEventListener("click", function(elemCheck) {
    var checkboxElement = elemCheck.target;
    var elCheck = checkboxElement.parentElement.parentElement;
    elCheck.parentElement.removeChild(elCheck);
    localStorage.setItem("ShoppingList", document.getElementById("myTable").innerHTML);
  });

}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="css/style.css" rel="stylesheet">
  <title>Cart</title>
</head>

<body onload="indexLS();return false;" class="body">
  <div class="menu">
    <ul class="list">
      <li class="li_index"><a class="link_index" href="index.html">Shopping list</a></li>
      <li class="li"><a class="link" href="done.html">Done</a></li>
      <li class="li"><a class="link" href="deleted.html">Deleted</a></li>
    </ul>
  </div>
  <div class="main">
    <h1 class="h1">Shopping List</h1>
    <hr class="hr">
    <div class="inputs">
      <input class="input_add" type="text" id="add_id" placeholder="Add items to you Shopping List">
      <input class="input_quant" type="text" id="quant_id" placeholder="Quant.">
      <input class="input_price" type="text" id="price_id" placeholder="Price">
      <button class="input_button" type="button" onclick="insertRow('myTable');return false;">Add</button>
    </div>
  </div>

  <div class="table">
    <table class="mytable" id="myTable" cellspacing="0" border="1">
      <tbody id="tbody">
        <tr id="tr_id" class="tr">
          <td>#</td>
          <td>Done</td>
          <td>Item</td>
          <td>Quantity</td>
          <td>Price $</td>
          <td colspan="2" width="100">Action</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>
<script src="js/main.js"></script>

</html>