De dynamiska flikarna visar samma poster

Jag hittade problemet i vyn och inte i datainsamlingen från db. Jag modifierade html-strukturen baserat på detta exempel:https://bootsnipp.com/snippets/exE6D
Ta reda på mer om navigering på Bootstrap-fliken:https://www.w3schools.com/bootstrap4/bootstrap_navs .asp
<?php
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'movie';

$conn = new mysqli($servername, $username, $password, $dbname);
$tab_query = "SELECT * FROM category ORDER BY Category_ID";
$tab_result = mysqli_query($conn, $tab_query);
$tab_menu = '';
$tab_content = '';
$count = 0;

while ($row = mysqli_fetch_array($tab_result)) {
    if ($count == 0) {
        $tab_menu .= '<a class="nav-item nav-link active" id="' . $row["Category_ID"] . '" data-toggle="tab" href="#nav-' . $row["Category_ID"] . '" role="tab" aria-controls="nav-' . $row["Category_ID"] . '" aria-selected="true">' . $row["Category_Name"] . '</a>';
        $tab_content .= '<div class="tab-pane fade show active" id="nav-' . $row["Category_ID"] . '" role="tabpanel" aria-labelledby="nav-' . $row["Category_ID"] . '-tab">';
    } else {
        $tab_menu .= '<a class="nav-item nav-link" id="' . $row["Category_ID"] . '" data-toggle="tab" href="#nav-' . $row["Category_ID"] . '" role="tab" aria-controls="nav-' . $row["Category_ID"] . '" aria-selected="false">' . $row["Category_Name"] . '</a>';
        $tab_content .= '<div class="tab-pane fade show" id="nav-' . $row["Category_ID"] . '" role="tabpanel" aria-labelledby="nav-' . $row["Category_ID"] . '-tab">';
    }

    $product_query = "SELECT * FROM movie WHERE Category_ID = '".$row["Category_ID"]."'";
    $product_result = mysqli_query($conn, $product_query);


    while($sub_row = mysqli_fetch_array($product_result))
    {   
        $tab_content .= '
        <div class="col-md-3" style="margin-bottom:36px;">
            <img src="'.$sub_row["Image_URL"].'" class="img-responsive img-thumbnail" />
            <h4>'.$sub_row["Title"].'</h4>
        </div>';
    }
    $tab_content .= '<div style="clear:both"></div></div>';
    $count++;
}
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Movie Testing Website</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="HandheldFriendly" content="true">

        <!--Bootstrap CSS-->
        <link  href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous">

        <link  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

        <!--Custom CSS-->
        <link  href="css/main.css">

        <!--jQuery-->
        <script defer 
            src="https://code.jquery.com/jquery-3.4.1.min.js"  
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="  
    crossorigin="anonymous"></script>

        <!--Bootstrap JS--> 
        <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"    
            integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm"  
    crossorigin="anonymous"></script>
        <script defer src="js/main.js"></script>
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 ">
                    <nav>
                        <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                        <?php echo $tab_menu; ?>
                        </div>
                    </nav>
                    <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
                    <?php echo $tab_content; ?>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>