jQuery阻止foreach循环工作？

Question

我正在尝试为客户帐户中的每个订单创建一个可折叠的div。代码在没有jquery的情况下工作正常。

但是当我使用jquery，并尝试扩展div时，那里什么都没有，它只是空白。

这是PHP：

<div class="container">
<h1> My Orders </h1>
<?php
                $user_id = $_SESSION['user_session'];
                $stmtGetOrderNumber = $DB_con->prepare("SELECT DISTINCT order_id FROM orders WHERE user_id = :user_id");
                $stmtGetOrderNumber->bindparam(":user_id",$user_id);
                $stmtGetOrderNumber->execute();
                $orderids=$stmtGetOrderNumber->fetchAll(PDO::FETCH_ASSOC);

                $stmtGetOrderItems = $DB_con->prepare("SELECT * FROM orders as o
                    INNER JOIN products as p ON p.product_id=o.product_id
                    INNER JOIN users as u ON u.user_id=o.user_id
                    WHERE order_id = :this_order_id
                    ORDER BY order_date_added DESC");
                    $stmtGetOrderItems->bindparam(":this_order_id", $id['order_id']);
                    $stmtGetOrderItems->execute();
                    $orders=$stmtGetOrderItems->fetchAll(PDO::FETCH_ASSOC);

                foreach($orderids as $id)
                {
                    $nameshown = false;
                    $emailshown = false;
                    $dateshown = false;
                    echo '<div class="list-group" style="padding-bottom:1%;">';
                    echo '<h1 class="list-group-item active">Order ID: ',$id['order_id'],'</h1>';

                    echo '<div class="header"> <span>Expand</span> </div>';
                    echo '<div class="content">';
                        foreach($orders as $order)
                        {
                            echo'<p>',$order['product_name'],'</p>';
                            echo'<p>£',$order['product_price'],'</p>';
                            echo'<img id="img" class="img-fluid" src="images/',$order['product_image'],'" style="height:100px;width:100px;">';
                            echo'<hr>';
                        }
                    echo'</div></div>';
                }

            ?>
     </div>

和jQuery：

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });
});

div的样式（不确定是否有必要）：

.container {width:100%;}
.container div {width:100%;}
.container .header {background-color:#d3d3d3;padding: 2px;cursor: pointer;font-weight: bold;}
.container .content{display: none;padding : 5px;}