Group 2 HTML table rows in a loop - php

Question

I have a table query from DB. This table has few info from the DB. The rest of the info I want is to be shown when I click the collapsible. So for that I want the collapsible row just after each of the queried row. Below is my code.
It is creating as many collapsible as queried rows but all rows are together and all collapsible are together. Also The collapsible are coming before the queried rows though it should be under the queried rows.
<table class="blueTable">
<thead>
<tr>
<th>Broadband ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Circle</th>
<th>SSA</th>
<th>SDCA</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_array($searchqry)):?>
<tr>
<td><?php echo $row['bb_id'];?></td>
<td><?php echo $row['name'];?></td>
<td><?php echo $row['email'];?></td>
<td><?php echo $row['phone'];?></td>
<td><?php echo $row['circle'];?></td>
<td><?php echo $row['ssa'];?></td>
<td><?php echo $row['sdca'];?></td>
</tr>
<tr><button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum</p>
</div>
</tr>
<?php endwhile;?>
</tbody>
</table>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++)
{
coll[i].addEventListener("click", function()
{
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight)
{
content.style.maxHeight = null;
}
else
{
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>

Answer 1

<tr>
<td colspan="8">
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum</p>
</div>
</td>
</tr>
Needed to put a cell inside the row.

Answer 2

You are missing a <td> inside of the second <tr>.