jQuery prevents foreach loop from working? - php

Question

I'm trying to create a collapsible div for each order in a customers account. The code works fine without the jquery.
But when I use jquery, and try to expand the div, there's nothing in there, it's just blank.
Here's the the 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>
And the 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";
});
});
});
And the styles for the div's (Not sure if this is necessary):
.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;}