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.