having trouble with jquery .context and .index - php

Question

here is my PHP code to generate a dynamic product table:
while($item = mysqli_fetch_array($result))
{
enter code here
$i++;
$pic = "cartimg/".$item[2];
echo "<div class='prod_box'".$i.">
<div class='center_prod_box'>
<div class='product_title'><a>".$item[1]."</a></div>
<div class='product_img'><a ><img src='".$pic."' alt='' border='0' /></a></div>
<div class='prod_price'><span class='reduce'>".$item[3]."$</span> <a class='price'>".$item[4]."$</a></div>
</div>
<div class='prod_details_tab'> <a class='prod_buy'>Add to Cart</a> <a class='prod_details'>Details</a> </div>
</div>";
}
?>
and here is my jQuery to respond to the clicked event to add the product into the shopping cart
enter code here
cart.addBuyButton(".prod_buy",{
name:'MacBook', // Item name appear on the cart
thumbnail:'media/macbook.jpg', // Thumbnail path of the item (Optional)
price:$("span").index(0), // Cost of the item
shipping:20
// Shipping cost for the item (Optional)
});
prettyPrint();
and here is the query for addBuyButton function
enter code here
self.addBuyButton=function(target,data){$(target).click(function(){self.cart.add(data)
the problem is that, I will have 10 containers, contain 10 products, with the same class name and Id names, and I cant figure out how to read the amount of ".$item[4]."$ if the customer clicked on Add to Cart of different products.
right now the function inserts 12 as the price.
please help me out here, I have surf through many jQuery tutorials but wasn't lucky to find a way.
thanks

Answer 1

Instead of having an addBuyButton for each item on the jQuery I would have just one event listener that handles all of it like this (I personally don't like huge chunks of php in quotes because my IDE doesn't color highlight so pardon my php syntax. You don't have to follow it if you don't like it):
PHP
<div id="products">
<?php while ($item = mysqli_fetch_array($result)) : ?>
<!-- additional code here -->
<div class="product prod_box<?php echo ++i; ?>">
<div class="center_prod_box">
<div class="product_title"><?php echo $item[1] ?></div>
<div class="product_img"><img src="cartimg/<?php echo $item[2] ?>" border="0" /></div>
<div class="prod_price">
<span class="reduce"><?php echo $item[3] ?>$</span>
<a class="price"><?php echo $item[4] ?>$</a>
</div>
</div>
<div class="prod_details_tab">
<a class="prod_buy">Add to Cart</a>
<a class="prod_details">Details</a>
</div>
</div>
<?php endwhile; ?>
</div>
JAVASCRIPT
$('#products').on('click', '.prod_buy', function() {
var product = $(this).closest('.product');
cart.add({
name: product.find('.product_title').first().text(),
thumbnail: product.find('.product_img').first().text(),
price: product.find('.price').first().text(),
shipping: 20
});
});
So that's one event listener for ALL of your prod_buy buttons and it gets the values for the product out of the DOM and adds it to the cart.
If you need any further help add a comment to this post and I'll add more to my answer.