I'm creating a table while looping through an API array and I've hit a couple snags. Here is the repeated HTML ->

$html = "
    <tr class='mt-2'>
        <td>{$rank}.</td>
        <td><img src='{$image}' height='75' width='75'></td>
        <td>{$name}</td>
        <td class='bold'>\${$final_worth}B</td>
        <td class='{$class}'>\${$last_change}</td>
        <td>{$country}</td>
        <td>{$source}</td>
        <td><button class='bg-color-primary text-color-third px-2' id='more_btn' onclick='showDetails({$cnt})'>More</button></td>
    </tr>
    <tr >
        <div id='details'>lorem ipsum wahoo baby</div>
    </tr>

    ";

Everything was going as expected until I went to add the second row (div#details).

There's actually 2 issues at play here - the first is how I make each button/div#details connected so button1 only effects div1 etc.

I can't tackle that one yet though, because right now when any button is clicked div#details shows up above the table header rather than underneath the previous row.

So until I have the positioning correct I can't really tackle the js functionality. Can someone please tell me why the <tr><div#details> is not appearing underneath it's previous row? The js code is as follows ->

<script>
  var cnt = <?php echo $cnt; ?>;
  function showDetails(cnt) {
      var details = "details";
      var x = document.getElementById(details);
      if (x.style.display === "none") {
          x.style.display = "block";
      } else {
          x.style.display = "none";
      }
  }
    
</script>

I know the code is a mess right now. It's kind of shameful lol but like I said I can't really do more with it until I can figure out why that table row isn't positioning properly