Not printing in correct columns - php

Question

I have set up a for and while loop to print through the contents of my database for my menu system. It works fine, however, the places to where each of the table contents is displayed is one below where it should be. See this picture below:
The problem is that the items which are showing under "Main Courses" are supposed to be under the "Starters" section.
See my code:
<?php
$query = "SELECT * FROM menu_type";
$result = mysqli_query($connect, $query);
$result_array = array();
$numRows = mysqli_num_rows($result); // returns the num of rows from the query above, allowing for dynamic returns
while($row = mysqli_fetch_assoc($result)){
$menuType = $row['type'];
$result_array[] = $menuType; // This array holds each of the menu_types from DB
}
$countArray = count($result_array);
for($i = 0; $i < $countArray; $i++){
echo "<h1 id='starters' class='head-font text-center head'>$result_array[$i]</h1>";
$query = "SELECT * FROM menu WHERE type_id='$result_array[$i]'";
$result = mysqli_query($connect, $query) or die(mysqli_error($connect));
echo
"
<div id='hide'>
<table class='table table-hover table-responsive'>
<thead>
<tr>
<th>
Item
</th>
<th class='text-right'>
Price
</th>
</tr>
</thead>
<tbody>
";
$menuQuery = "SELECT * FROM menu, menu_type WHERE type_id='$i' AND menu.type_id = menu_type.id";
$menuResult = mysqli_query($connect, $menuQuery) or die(mysqli_error($connect));
while ($row = mysqli_fetch_assoc($menuResult)) {
$name = $row['name'];
$description = $row['description'];
$price = $row['price'];
echo
"<tr>" .
"<td>$name - <small>$description</small></td>" .
"<td class='text-right'>" . "£" . $price . "</td>" .
"</tr>";
}
echo "</tbody>
</table>
</div>";
}
for($j = 1; $j < $numRows+1; $j++){
echo $j;
}
// print_r($result_array[2]);
?>