javascript im trying to append button to the end of each row in my table

Question

so im trying to add a buttons to the end of each row since the table is dynamic I have to use javascript to append it but everytime I try it doesn't work if it does it will just put a button at the end of the last row of the table. Heres an image of what I get linked below enter image description here

<!--TABLE HEADER SECTION-->
 <div class="div0">
  <table class="tableHeader">
    <thead>
        <tr>
            <th>Store</th>
            <th>Product</th>
            <th>Profile</th>
            <th>Proxies</th>
            <th>Status</th>
            <th>ACTION</th>
        </tr>
      </thead>
  </table>
</div>

<!--TABLE SECTION-->
<div class="div1">
  <table id = "botTasksTable" class="table table-dark table-sm table-bordered">
          <tbody>
              <tr>
                  <td>another name</td>
                  <td>mockdata</td>
                  <td>mockdata</td>
                  <td>mockdata</td>
                  <td>mockdata</td>
              </tr>
            </tbody>
      </table>
  </div>

<script type="text/javascript">
const tableBody = document.querySelector("#botTasksTable > tbody");

//function to load table into tbody from jsonfile bottable which would be the users given tasks
function loadBotTasksTable() {
  const request = new XMLHttpRequest();
  request.open("get", "data/botTable.json"); //grabs the data from the json file its in the data file/ and named bottable.json 
  request.onload = () => {

    const json = JSON.parse(request.responseText); //attempts to parse the data it gets 
    populateTable(json);
  };
  request.send(); //sends out the request for thr function
}

var btn = document.createElement("BUTTON");
var btn = document.createElement("BUTTON"); // Create a <button> element
btn.innerHTML = "CLICK ME"; // Insert text

function populateTable(json) {
  //this while loop clears out existing table data!
  //we want to add this back but adding a value to first child even if its a mock value.
  while (tableBody.firstChild) { //so basically checking if the table has <tr> <td></td>    </tr> so a row and column
    tableBody.removeChild(tableBody.firstChild)
  }

  //now we populate table
  json.forEach((row) => { //loops through each row [ SUPREME, Nike SB Dunks, profile1,   proxy22, In Progress ]
    const tr = document.createElement("tr"); //create the new row
    row.forEach((cell) => { //loops through each individual column of the row EX : SUPREME

      const td = document.createElement("td");
      td.textContent = cell // passes whatever data the json file had in the cell into the text content of the row
      tr.appendChild(td);
    });

    //for each cell in the row get the index and append 
    tableBody.appendChild(tr); //appends the row into the table body row by row as i runs through the for loop     
  });
  loopTable();
}

//loop through table and add button to the table
function loopTable() {
  var table = document.getElementById('botTasksTable');
  for (var i = 0, row; row = table.rows[i]; i++) {
    //iterate through rows
    //rows would be accessed using the "row" variable assigned in the for loop
    row.appendChild(btn);
    console.log(i);
  }
};

Answer 1

You need to create a new button for each row, and put it inside a <td>. You can use cloneNode() to make a copy of an element.

//loop through table and add button to the table
function loopTable() {
  var table = document.getElementById('botTasksTable');
  for (var i = 0, row; row = table.rows[i]; i++) {
    let td = document.createElement('td');
    td.appendChild(btn.cloneNode());
    row.appendChild(td);
    console.log(i);
  }
};