How to make invisible button appear when table row is selected

I can’t seem to make my group-button appear when a row is selected. Why is that and what’s the problem?

Heres my html code:

   <div class="container">
    <table id="table">
      <thead>
        <tr>
          <th>Batch ID</th>
          <th>Product Name</th>

        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    
  <button id="add-button" onclick="showaddForm()">Add</button>
  <div id="group-button">
    <button id="edit-button" onclick="showeditForm()">edit</button>
    <button id="delete-button" onclick="deleteRow()">Delete</button>
  </div>
  </div>

      <div id="add-form-popup" class="add-form-popup">
        <div class="add-form-container">
          <form id="addForm">
              <label for="batch-id-field">Batch ID:</label>
              <input type="text" id="add-batch-id-field" name="batch-id"><br>
        
              <label for="product-name-field">Product Name:</label>
              <input type="text" id="add-product-name-field" name="product-name"><br>
        
              <button onclick="addRow(event);" class="addbtn">add</button><br><br>
          </form>
        </div>
      </div>

I set the buttons invisible and will only be visible once a row was selected in the table

Here’s my css code:

  #group-button {
    display: none;
    margin-top: 20px;
  }

  #group-button.selected {
    display: block;
    margin-top: 20px;
  }

In my for loop, when a row is selected it should change the display of group-button from none to block

Here’s my javascript code:

var table = document.getElementById("table"),
  rIndex;

for (var i = 1; i < table.rows.length; i++) {
  table.rows[i].onclick = function() {
    rIndex = this.rowIndex;
    console.log(rIndex);
    document.getElementById("edit-batch-id-field").value = this.cells[0].innerHTML;
    document.getElementById("edit-product-name-field").value = this.cells[1].innerHTML;

    // show the group-button button when a row is selected
    document.getElementById("group-button").style.display = "block";

    // remove 'selected' class from all rows
    for (var j = 1; j < table.rows.length; j++) {
      table.rows[j].classList.remove("selected");
    }

    // add 'selected' class to the current row
    this.classList.add("selected");
  };
}

function addRow(event) {
  event.preventDefault();
  const batchId = document.getElementById("add-batch-id-field").value;
  const productName = document.getElementById("add-product-name-field").value;

  const tableRow = document.createElement("tr");
  const tableData1 = document.createElement("td");
  const tableData2 = document.createElement("td");

  tableData1.textContent = batchId;
  tableData2.textContent = productName;

  tableRow.appendChild(tableData1);
  tableRow.appendChild(tableData2);
  table.appendChild(tableRow);

  const form = document.getElementById("add-form-popup");
  form.style.display = "none";
}

function showaddForm() {
  const form = document.getElementById("add-form-popup");
  form.style.display = "block";
}