While循环内的循环不循环

I have a php page which has accordion tabs on it. The Title Heading for each tab should be the title of a Category. In the database there are 10 Categories.

Each tab shall list all players in that specific category. So accordion tab1 will have a title of "Category 1" and include a list of all players from the database in "Category 1". This is done in two separate php pages.

The first page is the accordion panel body which should loop through the database and create a new panel for each category. Then in this panel page is an "include" for the players.

My problem is that the panel While loop goes through the loop only one time and creates the panel for Category 1 but never goes to "Category 2". The reason somehow is the "php includes" for the players. If I comment out "include 'includes/player-select.php';" for the players so that it only creates tabs for the Categories, then it will loop through the entire database and create 10 tabs. Including the players will stop the loop at the first category tab only.

Got ideas?

Here is the Panel.php

        <?php
    $query = "SELECT catID,cat_name,categoryColor FROM Categories";
    $result = mysqli_query($conn, $query);

    if($result === FALSE) { 
        die(mysqli_error());
        }

    while ($row = mysqli_fetch_array($result)) {

        $cat_id = $row['catID'];
        $catName = $row['cat_name'];
        $catColor = $row['categoryColor'];

        //  BEGIN PANEL 
        echo '<div class="panel panel-default">';
            echo '<a data-toggle="collapse" data-parent="#accordion" href="#collapse' . $cat_id .'">';
                echo '<div class="panel-heading" style="background-color: ' . $catColor . '; color: #2b2c31;">';
                    echo '<h4 class="panel-title">';
                        echo $catName . '<span class="glyphicon glyphicon-chevron-down caret-right"></span>';
                    echo '</h4>';
                echo '</div>';
            echo '</a>'; // END Panel Title Bar
        // BEGIN Panel Body
            echo '<div id="collapse' . $cat_id . '" class="panel-collapse collapse in">';
                echo '<div class="panel-body votes">';

//       BEGIN Player1Select.php 
                    include 'includes/player-select.php';
                    //       END Player1Select.php 

                            echo '</div>'; // END panel-body
                    echo '</div>'; // END collapse' $cat_id 
            echo '</div>'; // END panel panel-default 
    //  END PANEL   
    }
?>

AND Now here is the player-select.php

    <div class="col-md-4 text-center">
<div class="tab-inner">
    <div class="form-group">
        <form action="" method="post">
            <div class="select-box-left">

                <?php
                    //execute the SQL query and return records
                    $query = "SELECT first_name,last_name, playerID, categoryID FROM Players WHERE categoryID = '$cat_id' ORDER BY last_name";
                    $result = mysqli_query($conn, $query);

                    if($result === FALSE) { 
                        die(mysqli_error());
                    }

                    while ($row = mysqli_fetch_array($result)) {

                        $playerID = $row['playerID'];
                        $playerFN = $row['first_name'];
                        $playerLN = $row['last_name'];
                        $playerCatID = $row['categoryID'];

                        echo '<div class="selection1" value=' . $playerFN . $playerLN . '>' . $playerFN . " " . $playerLN ."</div>";
                    }

                ?>
                </div>
        </form>
    </div><!-- END form-group -->
                                </div> <!-- END tab-inner -->
                            </div> <!-- END col-md-4 -->

                <!-- BEGIN Player Images -->
                            <div class="col-md-4 text-center">
<div class="tab-inner">
    <img src="images/players/3_image.png" class="img-responsive img-left" alt="Vote" width="160" height="116">
    <img src="images/players/2_image.png" class="img-responsive img-right" alt="Vote" width="160" height="116">
    <img src="images/vs.png" class="img-responsive img-middle" alt="vs" width="45" height="45">
                                </div>
<div id="btnVote"><button type="submit" class="btn btn-primary" id="voteButton" disabled>VOTE NOW</button></div>
                            </div>
                <!-- END Player Images -->

                            <div class="col-md-4 text-center">
<div class="tab-inner">
    <div class="form-group">
            <div class="select-box-right">
                <?php
                    //execute the SQL query and return records
                    $query = "SELECT first_name,last_name, playerID, categoryID FROM Players WHERE categoryID = '$cat_id' ORDER BY last_name";
                    $result = mysqli_query($conn, $query);

                    if($result === FALSE) { 
                        die(mysql_error()); // TODO: better error handling
                    }

                    //fetch tha data from the database
                    while ($row = mysqli_fetch_array($result)) {

                        $playerID = $row['playerID'];
                        $playerFN = $row['first_name'];
                        $playerLN = $row['last_name'];
                        $playerCatID = $row['categoryID'];

                        echo '<div class="selection2" value=' . $playerFN . $playerLN . '>' . $playerFN ." " . $playerLN . "</div>";
                    }
                ?>
                </div>
    </div><!-- END form-group -->
                                </div> <!-- END tab-inner -->
                            </div> <!-- END col-md-4 -->

I have two possible solutions:

1.) it could be because you have a semi-colon after your while loop closing curly bracket.

2.) Whenever I user MySQL_fetch_array I index the $row variable.

like:

$query = "SELECT catID,cat_name,categoryColor FROM Categories";

                                                while ($row = mysqli_fetch_array($result)) {

                                                $cat_id = $row['catID'];
                                                $catName = $row['cat_name'];
                                                $catColor = $row['categoryColor'];

My example

while ($row = mysqli_fetch_array($result)) {

                                                $cat_id = $row[0];
                                                $catName = $row[1];
                                                $catColor = $row[2];

Got it. What was happening was that the same $variables were being used in all three loops, $query, $row .... So the original while loop variable were being reset to false once the other two completed. So the answer was to rename the $variables.