javascript - Display data from 2 table in Bootstrap tab

one text

<ul class="nav nav-tab text-center nav_tab">
                    
<li><a class="newvalue" data-toggle="tab" href="#<?php echo $row['category_auto'] ?>"><?php echo $row['category_auto'] ?></a></li>
                        
</ul>
<div class="tab-content">
    <div id="" class="newtab tab-pane fade">
        <?php
        $result = mysqli_query($connect,"SELECT * FROM category INNER JOIN project on category.category_auto = project.category");
        $i=1;
            while($row = mysqli_fetch_array($result)) {
                $cat = $row['category_auto'];
                $proj = $row['name'];
        ?>
        <div class="col-md-6 get_class" data-category="<?php echo $cat ?>">
            
        <div class="col-md-12 more_projects" data-aos="fade-up">
            <a href="project-detail.php?id=<?php echo $row['id']; ?>">
                <img src="https://www.biancaclothspa.com/architect/web/admin/project/<?php echo $row["image_path"] ?>" />
                <h1><?php echo $row["name"] ?></h1>
                <p><?php echo $row["location"] ?></p>
            </a>
        </div>
        </div>
        
    <?php } $i++; ?>
    </div>
</div>

Here I want to display dynamic data coming from the database. There is 2 Table (category, project). Both have a category column (category_auto, category).

But front-end side has 2 tab for 2 category. ( cat one, cat two). In that, I want to display data in a separate tab as per the category.

My Work Link: https://www.biancaclothspa.com/architect/web/project.php please check the last 2 tabs (New, Random) I don't know how to filter data that is coming from the database.