Why Isnt js / jquery Events working in PHP foreach - php

Question

I understand foreach but this is new for me because within the foreach in PHP I have some script for each item that shows up and wondering why it only works for the item in the first item
In the code, I am getting an image from an MYSQL database. instead of using onclick in js I am learning more into jquery and only when I click the first image it will generate the
$("#main").load("includes/product.php");
path and change I want to change but in the product name and the cart button do not change the visuals.
<section id="new-products" class="clearfix">
<div class="title-block">
<h4>New Products</h4>
</div>
<?PHP
foreach ($item as $items){
?>
<div class="left-col-block">
<article class="product-box clearfix">
<a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" id="product-link">
<img src="<?PHP echo $items['image']; ?>" alt="Card Games" title="Card Games" height="80" width="80">
</a>
<?PHP echo $items['name']; ?><br>
<span class="price">$<?php echo $items['price'];?></span>
</article>
`<script>
$( "#product-link" ).click(function() {
$("#main").load("includes/product.php");
});
</script>
</div>
<div class="left-col-block">
</div>
<?PHP
}
?>
</section>
Expected:
I am wanting each link with the id of product-link to give the event trigger with jquery on each product and each id
Actual Results:
$("#main").load("includes/product.php");
only works on the first id that is equal to product-link

Answer 1

because of you have 3 like for each item and you want to set on click for every 3 link, you must use class attribute and set it unique for each item.
I changed your code to this:
<section id="new-products" class="clearfix">
<div class="title-block">
<h4>New Products</h4>
</div>
<?PHP
foreach ($item as $key=>$items){
?>
<div class="left-col-block">
<article class="product-box clearfix">
<a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" class="product-link-<?=$key?>">
<img src="<?PHP echo $items['image']; ?>" alt="Card Games" title="Card Games" height="80" width="80">
</a>
<?PHP echo $items['name']; ?><br>
<span class="price">$<?php echo $items['price'];?></span>
</article>
`<script>
$( ".product-link-<?=$key?>" ).click(function() {
$("#main").load("includes/product.php");
});
</script>
</div>
<div class="left-col-block">
</div>
<?PHP
}
?>
</section>

Answer 2

Found the answer was
<script>$( ".product-box a" ).click(function() {
$("#main").load("includes/product.php");
});</script>
since product-bot was a class and I didn't realize the # makes it check for id and the. makes it search for a class and class is able to be called multiple times whereas an id has to be unique