Selecting attributes of an item from a database and have them displayed in a DIV by clicking a link

[mostwanted]

I'm a tourist with JavaScript & right now I'm trying to achieve something with JQuery but there is something wrong with my code i cant figure it out, i need help.
I'm creating a simple point of sale system, I have a list of sold items in my database and i am placing them as a menu of links of sold items on my view, what I want to do is to be able to repetitively select the desired sold items by clicking on them and have them display their attributes (item name & item price) on a selected DIV but my code is not doing this, when i click on an item only one row of the wrong item  (the one NOT SELECTED!) is displayed, other links do not display anything and no errors are given by browser developer tool!

Can anyone out there please save me, please!
Thank you!

MY CODE:

<div id="mainContainer">
    <div class="inner" id="products">
        <span id="forsale">PRODUCTS FOR SALE</span>
        <hr class="style-head"/>
        {{for product in products:}}
       <div class="item"> <a href="#" class="itemProduct">{{=product.product_name}}</a> <span class="divider">|</span> <span>{{=A('Update', _class="update", _id="update", _href=URL('productUpdate', args=product.id))}}</span></div>
<!-----------------------------------MAKING A SALE SCRIPT------------------------------->
<script type="text/javascript">
$(function(){
$(".itemProduct").each(function() {
$(this).click(function(e) {
$("#message").hide();
$('#makeSales').html("<table><tr> <td>{{=product.product_name}}</td> <td><input type='text' size='5' placeholder='Quantity' class='num1 key'></td><td><div class='price' id='price'></div></td> <td><div class='sum'></div></td> </tr></table>");
    $(".sum").text({{=product.price}});
    $("#price").text({{=product.price}});

        $(".key").keyup(function() {
        var $num1 = ($.trim($(".num1").val()) != "" && !isNaN($(".num1").val())) ? parseFloat($(".num1").val()) : 1;
        var $price=($.trim($("#price").html()) != "" && !isNaN($("#price").html())) ? parseFloat($("#price").html()) : {{=product.price}};
        $("#price").text($price);
        var $totalPrice=parseFloat($num1 * $price);
        $(".sum").text($totalPrice);
        });
e.preventDefault();
});
});
});
</script>

<div id="makeSales">
            <p id="message">
                SALES EMPTY!
            </p>
        </div>