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

Question

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
                }
            }
        ?>

Answer 1

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>