使用onclick事件时，只能从while循环返回一个

I am trying to iterate through each item in sql (there are 4), however; it is only returning one iteration. It should be noted that all of this info is in this vertical order in my PHP file

javascript

<script>
    function showDiv() {
        if($("#hiddenDiv" ).css('display') == 'none') {
            $("#hiddenDiv" ).show();
        }else {
            $("#hiddenDiv" ).hide();
        }
    }
</script>

HTML

<div class="panel-heading">
   <span>Checkout</span>
      <button onclick="showDiv()" class="btn btn-warning pull-right">
   <span class="glyphicon glyphicon-chevron-down"></span>
      </button>
</div>

PHP

       <?php            
            $query = "SELECT * FROM products ORDER BY id ASC";
            $result = mysqli_query($connect, $query);
            if(mysqli_num_rows($result) > 0)
            {
                while($row = mysqli_fetch_array($result))
                {        

        ?>
            <div class="col-md-3" style="display:none;" id="hiddenDiv">
                <form method="post" action="shop.php?action=add&id=<?php echo $row['id']; ?>">
                <div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center">
                <?php echo "<img src=\"imeg/". $row["image"] . "\" " . "class=\"img-responsive\">"; ?>
                <h5 class="text-info"><?php echo $row["p_name"]; ?></h5>
                <h5 class="text-danger">$ <?php echo $row["price"]; ?></h5>
                <input type="text" name="quantity" class="form-control" value="1">
                <input type="hidden" name="hidden_name" value="<?php echo $row["p_name"]; ?>">
                <input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>">
                <input type="submit" name="add" style="margin-top:5px;" class="btn btn-default" value="Add to Cart">
                </div>
                </form>
           </div>

        <?php
                }
            }
        ?>

As there are multiple rows returned, you need to change "hiddenDiv" from id to a class or create the hidden div outside of the loop

<div id="hiddenDiv" style="display:none;">

       <?php            
            $query = "SELECT * FROM products ORDER BY id ASC";
            $result = mysqli_query($connect, $query);
            if(mysqli_num_rows($result) > 0)
            {
                while($row = mysqli_fetch_array($result))
                {        

        ?>
            <div class="col-md-3" >
                <form method="post" action="shop.php?action=add&id=<?php echo $row['id']; ?>">
                <div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center">
                <?php echo "<img src=\"imeg/". $row["image"] . "\" " . "class=\"img-responsive\">"; ?>
                <h5 class="text-info"><?php echo $row["p_name"]; ?></h5>
                <h5 class="text-danger">$ <?php echo $row["price"]; ?></h5>
                <input type="text" name="quantity" class="form-control" value="1">
                <input type="hidden" name="hidden_name" value="<?php echo $row["p_name"]; ?>">
                <input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>">
                <input type="submit" name="add" style="margin-top:5px;" class="btn btn-default" value="Add to Cart">
                </div>
                </form>
           </div>

        <?php
                }
            }
        ?>
</div>

<script>
    function showDiv() {
        $("#hiddenDiv" ).slideToggle();

    }
</script>

when you click on showDiv button it will show only one div with id hiddenDiv and remaining will be hidden .So add hiddenDiv as class and made corresponding change in script also

  <div class="col-md-3 hiddenDiv" style="display:none;">
<script>
   function showDiv() {
        if($(".hiddenDiv" ).css('display') == 'none') {
            $(".hiddenDiv" ).show();
        }else {
            $(".hiddenDiv" ).hide();
        }
    }
</script>