Các tab động đang hiển thị các bản ghi giống nhau

Tôi đã tìm thấy sự cố trong chế độ xem chứ không phải trong thu thập dữ liệu từ db. Tôi đã sửa đổi cấu trúc html dựa trên mẫu này: https://bootsnipp.com/snippets/exE6D
Tìm hiểu thêm về điều hướng tab Bootstrap: 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>