Using jQuery .eq to update value
<p>I have a div in a shopping cart that I'm trying to alter the number of items to match the number of items on the left side of the screen. As you press the up and down buttons next to an item the number increments appropriately. However I'm having difficulty accessing the corresponding div in the cart. Right now the number in the cart is stuck on 0. Line 7 of the code is where my problem is I believe.</p>

<p>Here is a jsfiddle: <a href="http://jsfiddle.net/richcoy/MHMVC/" rel="nofollow">http://jsfiddle.net/richcoy/MHMVC/</a></p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;!doctype html&gt;
&lt;html lang=en&gt;
&lt;head&gt;
&lt;meta charset=utf-8&gt;
&lt;title&gt;Number Updater&lt;/title&gt;
 &lt;link rel="stylesheet" href="css/styles.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="body_container"&gt;
&lt;div id="product_container"&gt;
&lt;div id="product_item_one" class="product_box"&gt;
    &lt;div class="item_name"&gt;Item One&lt;/div&gt;
    &lt;img src="http://placehold.it/90x80"&gt;    
    &lt;div class="product"&gt;0&lt;/div&gt;
    &lt;button class="up"&gt;Up&lt;/button&gt;
    &lt;button class="down"&gt;Down&lt;/button&gt;
&lt;/div&gt;

&lt;div id="product_item_two" class="product_box"&gt;
    &lt;div class="item_name"&gt;Item Two&lt;/div&gt;
    &lt;img src="http://placehold.it/90x80"&gt;    
    &lt;div class="product"&gt;0&lt;/div&gt;
    &lt;button class="up"&gt;Up&lt;/button&gt;
    &lt;button class="down"&gt;Down&lt;/button&gt;
&lt;/div&gt;

&lt;div id="product_item_three" class="product_box"&gt;
    &lt;div class="item_name"&gt;Item Three&lt;/div&gt;
    &lt;img src="http://placehold.it/90x80"&gt;        
    &lt;div class="product"&gt;0&lt;/div&gt;
    &lt;button class="up"&gt;Up&lt;/button&gt;
    &lt;button class="down"&gt;Down&lt;/button&gt;
&lt;/div&gt;

&lt;div id="product_item_four" class="product_box"&gt;
    &lt;div class="item_name"&gt;Item Four&lt;/div&gt;
    &lt;img src="http://placehold.it/90x80"&gt;    
    &lt;div class="product"&gt;0&lt;/div&gt;
    &lt;button class="up"&gt;Up&lt;/button&gt;
    &lt;button class="down"&gt;Down&lt;/button&gt;
&lt;/div&gt;

&lt;div id="product_item_five" class="product_box"&gt;
    &lt;div class="item_name"&gt;Item Five&lt;/div&gt;
    &lt;img src="http://placehold.it/90x80"&gt;        
    &lt;div class="product"&gt;0&lt;/div&gt;
    &lt;button class="up"&gt;Up&lt;/button&gt;
    &lt;button class="down"&gt;Down&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div id="cart_container"&gt;
    &lt;h3&gt;Shopping Cart&lt;/h3&gt;
    &lt;div id="cart_item_one" class="cart_product"&gt;
            &lt;div class="item_name"&gt;Item One&lt;/div&gt;
            &lt;div class="cart_product_number"&gt;0&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="cart_item_two" class="cart_product"&gt;
            &lt;div class="item_name"&gt;Item Two&lt;/div&gt;
            &lt;div class="cart_product_number"&gt;0&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="cart_item_three" class="cart_product"&gt;
            &lt;div class="item_name"&gt;Item Three&lt;/div&gt;
            &lt;div class="cart_product_number"&gt;0&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="cart_item_four" class="cart_product"&gt;
            &lt;div class="item_name"&gt;Item Four&lt;/div&gt;
            &lt;div class="cart_product_number"&gt;0&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="cart_item_five" class="cart_product"&gt;
            &lt;div class="item_name"&gt;Item Five&lt;/div&gt;
            &lt;div class="cart_product_number"&gt;0&lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;&lt;!-- end #body_container --&gt;
&lt;/body&gt;
&lt;/html&gt;​
</code></pre>

<p><strong>JavaScript:</strong></p>

<pre><code>$(document).ready(function() {
    var num;
    $('.up').click(function() {
        num = parseInt($(this).siblings('.product').text());
        $(this).prevAll('.product').text(num + 1);        
        $('.cart_product').eq($(this).closest('.product_box').index()).show();
        $('.cart_product').eq($(this).closest('.cart_product_number').text(num));
    });

    $('.down').click(function() {
        num = parseInt($(this).siblings('.product').text());
        if (num &gt; 0) {
            $(this).siblings('.product').text(num - 1);
        };

        if (parseInt($(this).siblings('.product').text()) == 0) {
            $('.cart_product').eq($(this).closest('.product_box').index()).hide();
        } else {
            $('.cart_product').eq($(this).closest('.product_box').index()).show();
        }
    });
});
</code></pre>

<p>​</p>
