类别按钮

Question

I am trying to create a category button for my e-commerce website. Been trying to generate an idea of the button which clicked, so that the jQuery will be able to toggle the database which each represents. So far the idea is getting there but missing something.

So far all I have been doing is inputting the IDs statically and the outcome is grouping filter results, on top of each other instead of switching their results.

The database connection with SQL:

<?php
$db = mysqli_connect('127.0.0.1', 'root', '', 'firmciti');

if(mysqli_connect_errno()) {
    echo 'Database connect failed with follwing errors: '. mysqli_connect_error();
    die();
}
error_reporting();


$sql = "SELECT * FROM nav";
$squery = $db->query($sql);
$pql = "SELECT * FROM companies";
$pquery = $db->query($pql);
$gql = "SELECT * FROM companies WHERE catId = 2";
$gquery = $db->query($gql);
$fql = "SELECT * FROM companies WHERE catId = 3";
$fquery = $db->query($fql);
$aql = "SELECT * FROM companies WHERE catId = 4";
$aquery = $db->query($aql);
$cql = "SELECT * FROM companies WHERE catId = 5";
$cquery = $db->query($cql);
...
?>

The jquery:

<script>
$(document).ready(function(){
    $("#1").click(function(){
        $("#view").toggle();

    });
});
$(document).ready(function(){
    $("#2").click(function(){
        $("#view1").toggle();

    });
});
$(document).ready(function(){
    $("#3").click(function(){
        $("#view2").toggle();

    });
});
$(document).ready(function(){
    $("#4").click(function(){
        $("#view3").toggle();

    });
...</script>

The html:

<?php while($cat = mysqli_fetch_assoc($squery)): ?> 
<button id="<?=$cat['catId']; ?>"><img src="<?=$cat['img'];?>" style="height: 80px; width: 80px; margin: 0 15px;"/> </button>

<?php endwhile; ?>

<!--all-->

<div id="view" style="margin: 0 20px" >

<?php while($comp = mysqli_fetch_assoc($pquery)): ?> 
<!-- Gallery list-->
    <button class="w3-button w3-white w3-border w3-hover-amber " href="" type="button" style="width: 340px; height: 100px; margin: 5px;"><div class="col-xs-4">
        <img src="<?=$comp['compLogo'];?>" style="height: 80px; width: 80px";/>
            </div>
        <div class="col-xs-8">
            <h4 class="w3-display-topleft"><?=$comp['compName'];?></h4><br><br>


            <h6 class="w3-half">25min</h6>

        </div>
    </button>

<?php endwhile;?>
</div>


<!--grocery-->
<div id="view1" style="margin: 0 20px" hidden="">

<?php while($comp = mysqli_fetch_assoc($gquery)): ?> 
<!-- Gallery list-->
    <button class="w3-button w3-white w3-border w3-hover-amber " href="" type="button" style="width: 340px; height: 100px; margin: 5px;"><div class="col-xs-4">
        <img src="<?=$comp['compLogo'];?>" style="height: 80px; width: 80px";/>
            </div>
        <div class="col-xs-8">
            <h4 class="w3-display-topleft"><?=$comp['compName'];?></h4><br><br>


            <h6 class="w3-half">25min</h6>

        </div>
    </button>

<?php endwhile;?>
</div>

<!--food-->
<div id="view2" style="margin: 0 20px" hidden="">

<?php while($comp = mysqli_fetch_assoc($fquery)): ?> 
<!-- Gallery list-->
    <button class="w3-button w3-white w3-border w3-hover-amber " href="" type="button" style="width: 340px; height: 100px; margin: 5px;"><div class="col-xs-4">
        <img src="<?=$comp['compLogo'];?>" style="height: 80px; width: 80px";/>
            </div>
        <div class="col-xs-8">
            <h4 class="w3-display-topleft"><?=$comp['compName'];?></h4><br><br>


            <h6 class="w3-half">25min</h6>

        </div>
    </button>

<?php endwhile;?>
</div>