Mouseover specification - php

Question

I'm working on a website with comparing multiple products (Link). The productnames are in a box. With a mouseover I can see their specification in the box. The problem is that I have multiple boxes with different products and all of the specification are loading inside one box. I hope someone can help me.
(It's partly Dutch)
if($nieuws['relateditem'])
{
$array1 = explode(",", $nieuws['relatedoption']);
foreach($array1 as $key2)
{
print_r($key2);
}
$content .='
<h2>Gerelateerde producten</h2>
<div id="product-grid">
<div id="product-grid-inner">
';
$array = explode(",", $nieuws['relateditem']);
$i = 0;
$id = 0;
foreach($array as $key1)
{
$id++;
$i++;
$key1 = trim($key1);
$query4x = $mysqli->query("SELECT * FROM producten WHERE productcode='".$key1."'");
$row2x = $query4x->fetch_assoc();
$hammer = str_replace("XXX", $row2x['id'], $hammertimePro);
$content .='
<div id="'.$id.'blok" class="product-grid-item3" onMouseOver="this.style.border = \'1px solid #007fff\'" onMouseOut="this.style.border = \'1px solid #CCCCCC\'">
<h2 class="titel">'.$row2x['naam'].$hammer.'<br /></h2><br />';
//----
$options2 = explode(",", $row2x['relatedoption']);
foreach($options2 as $option2)
{
$query2 = $mysqli->query("SELECT * FROM producten WHERE productcode = '".$option2."'");
while($row2 = $query2->fetch_assoc())
{
$content.= "<div onMouseOver=\"this.style.backgroundColor='#f0f0f0'; this.style.cursor='pointer'; showConc(".$row2['id'].",1)\" onMouseOut=\"this.style.backgroundColor='#ffffff';\">".substr($row2['naam'], 13, 4)."</div>";
}
}
//---- onMouseOver='showInformation(".$prods['id'].")'
$content.='<div id="specs"></div></div>';
}
$content .= '</div></div>';
}
?>
function showConc(id,box) {
$.ajax({
url: 'http://www.ledisvet.nl/A3/concept_prod.php',
type: 'get',
data: 'id='+id,
success: function(result) {
$('#specs').html(result);
}
});
}
Thanks

Answer 1

There are multiple problems here. The #1 problem is that you have three divs with the id specs. Ids must be unique - the browser doesn't know which #specs box you mean so it picks the first it finds.
You never use the showConc() function's second parameter (box). Even if you did, you have it hardcoded to 1: showConc(".$row2['id'].",1).
Change the showConc() function to something like this:
function showConc(id,box) {
$.ajax({
// ... other parameters here
success: function(result) {
$('#specs'+box).html(result);
}
});
}
Then change the specs ids to specs1, specs2 and specs3 and call the function with the correct number.