Hello,

I have a multiple product elements that get their class and ID from PHP:

$product1["codename"] = "product-1";
$product1["short"] = "Great Product 1";

$product2["codename"] = "product-2";
$product2["short"] = "Great Product 2";



<div class="leftMenuProductButton" id="'. $product1["codename"].'" >'. $product1["short"].'</div>

<div class="leftMenuProductButton" id="'. $product2["codename"].'" >'. $product2["short"].'</div>

These display as:

<div class="leftMenuProductButton" id="product-1" > Great Product 1</div>

<div class="leftMenuProductButton" id="product-2" > Great Product 2</div>

In the page, I have an element that I want to replace the HTML:

        <div id="productPopupTop">
         //Replace this content
        </div>

Using jquery, I have tried the following:

$( '.leftMenuProductButton' ).hover (
            function () {

                var swapNAME = $(this).attr("id"); //gets the ID, #product-1, #product-2 etc. This works.
                $("#productPopupTop").html('  <? echo $' + swapNAME + '["short"] ?>'); //This is supposed to get something like <? echo $product-1["short"] ?> This doesn't appear to work.


            },
            function () {
            //this is just here for later

    });

If I try to do an alert('<? echo $' + swapNAME + '["short"] ?>'); it will literally display something like <? echo $product-1["short"] ?>

Please note that both the Javascript and the PHP are externally linked in a PHP file (index.php <<< (js.js, products.php)

QUESTION: How do I replace the HTML() of #productPopupTop with the ["short"] of a product? If I should use Ajax, how would I code this?