Multiple Products

HTML

<form id="say-form" onsubmit="return false;" action="#">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <th>Name</th>
            <th>Qty</th>
            <th>Price</th>
            <th colspan="2">Total</th>
            
        </tr>
        <tr>
            <td class="title">Prod A</td> 
            <td class="qty" id="qty_a">0</td>
            <td class="price">$<span id="price_1">5.00</span></td>
            <td class="price">$<span id="total_price_1">0.00</span></td>
            <td>
              <input type="button" id="add_a" value="+" />
              <input type="button" id="sub_a" value="-" />
            </td>
        </tr>
        <tr>
            <td class="title">Prod B</td>
            <td class="qty" id="qty_b">0</td>
            <td class="price">$<span id="price_b">10.00</span></td>
            <td class="price">$<span id="total_price_b">0.00</span></td>
            <td>
              <input type="button" id="add_b" value="+" />
              <input type="button" id="sub_b" value="-" />
            </td>
        </tr>
    </table>
</form><br />
<br />
<div id="cart"></div>

CSS

td, th { padding: 3px 0; }
th { font-weight: bold; }
.title { width: 100px; }
.qty { width: 50px; }
.price { width: 75px; }
tr:hover td { background-color: #EFEFEF; }

JavaScript

var products = [ 'a', 'b' ];
var initializeProduct = function( product_id ) {
   
    var items = 0;
    var qty   = document.getElementById( 'qty_' + product_id );
    var add   = document.getElementById( 'add_' + product_id );
    var sub   = document.getElementById( 'sub_' + product_id );
    
    add.onclick = function() {
      items = items + 1; // add one per click 
      qty.innerHTML = items;  // change SPAN innerHTML
    };
    
    sub.onclick = function() {
        
      if ( items == 0 ) {
        return false;
      }
        
      items = items - 1; // subtract one per click
      qty.innerHTML = items; // change SPAN innerHTML
        
    };
    
    
    
};

for ( var i = 0; i < products.length; ++i ) {
    initializeProduct( products[i] );   
}