Bootstrap table-deleting a row from the DOM destroys the ability to add anymore rows to the table

Apologize upfront, I am very new to Bootstrap and JS. Trying to create a Table with Bootstrap that a user can add data to but also remove their entry. Everything seems alright with the adding but when you delete a row from the table using the created button it removes the ability to add anymore rows when entering user data.

This is the table I am using. I have some static data to make it seem like the page is retaining data from a DB.

<div class="col-auto">
        <table id="coffee-table" class="table table-active gFont">
          <thead>
            <tr class="text-danger">
              <th class="col-auto">First</th>
              <th class="col-auto">Last</th>
              <th class="col-auto">Favorite Coffee</th>
            </tr>
          </thead>
          <tbody>
            <tr id="item-0">
              <td>Larry</td>
              <td>Bird</td>
              <td>Iced Coffee</td>
            </tr>
            <tr id="item-1">
              <td>Jesse</td>
              <td>Watch</td>
              <td>Latte</td>
            </tr>
            <tr id="item-2">
              <td>Tiger</td>
              <td>Woods</td>
              <td>Cappuccino</td>
            </tr>
          </tbody>
        </table>
      </div>

JS code for adding to the table and making/adding the delete button to the user created row.

let id = 3;

document.getElementById("add-coffee-button").addEventListener("click", () => {
  let table = document.getElementById("coffee-table");
  let row = table.insertRow(id + 1); //Trying to insert at bottom of Table
  row.setAttribute("id", `item-${id}`);
  row.insertCell(0).innerHTML = document.getElementById("first-name").value;
  row.insertCell(1).innerHTML = document.getElementById("last-name").value;
  row.insertCell(2).innerHTML = document.getElementById(
    "favorite-coffee"
  ).value;
  //   row.insertCell(3).appendChild(deleteButton(id++));
  document.getElementById("first-name").value = "";
  document.getElementById("last-name").value = "";
  row.insertCell(3).appendChild(makeDeleteBtn(id++));
  document.getElementById("favorite-coffee").value = "";
});

function makeDeleteBtn(id) {
  let btn = document.createElement("button"); // <button> </button>
  btn.className = "btn btn-primary"; //<button class="btn btn-primary"></button>
  btn.id = id; //<button class="btn btn-primary" id="3"></button>
  btn.innerHTML = "Delete"; //<button class="btn btn-primary" id="3"> Delete</button>
  btn.onclick = () => {
    document
      .getElementById(`item-${id}`)
      .parentNode.removeChild(document.getElementById(`item-${id}`));
    id--;
  };

  return btn;
}

Answer

You are taking id as static and once you are adding a row you are incrementing the id. But when you are deleting a row, the new id for adding an element changes. You can use table.rows.length for getting id dynamically. It will give the number of tr in table. So, you just need to exclude header tr. Try below code :

let id = 3;

document.getElementById("add-coffee-button").addEventListener("click", () => {
  let table = document.getElementById("coffee-table");
  console.log(table.rows.length);
  let row = table.insertRow(table.rows.length); //Trying to insert at bottom of Table
  row.setAttribute("id", `item-${table.rows.length - 2}`);
  row.insertCell(0).innerHTML = document.getElementById("first-name").value;
  row.insertCell(1).innerHTML = document.getElementById("last-name").value;
  row.insertCell(2).innerHTML = document.getElementById(
    "favorite-coffee"
  ).value;
  //   row.insertCell(3).appendChild(deleteButton(id++));
  document.getElementById("first-name").value = "";
  document.getElementById("last-name").value = "";
  row.insertCell(3).appendChild(makeDeleteBtn(table.rows.length - 2));
  document.getElementById("favorite-coffee").value = "";
});

function makeDeleteBtn(id) {
console.log(id);
  let btn = document.createElement("button"); // <button> </button>
  btn.className = "btn btn-primary"; //<button class="btn btn-primary"></button>
  btn.id = id; //<button class="btn btn-primary" id="3"></button>
  btn.innerHTML = "Delete"; //<button class="btn btn-primary" id="3"> Delete</button>
  btn.onclick = () => {
    document
      .getElementById(`item-${id}`)
      .parentNode.removeChild(document.getElementById(`item-${id}`));
    id--;
  };

  return btn;
}