$(document).ready(function() {
  $('div#shop-items ul li').each(function(index) {
    $('div#jqshopoutput').append('<div class="shop-order-row"><div class="order-row-qty"><select class="watchme" name="quantity_'+index+'" id="quantity_'+index+'"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></div><div class="order-row-item" id="item_'+index+'">'+$(this).text() + ' @  &pound;' + $('div#shop-prices ul li:eq('+index+')').text()+'<input type="hidden" id="itemname_'+index+'" name="itemname_'+index+'" value="'+$(this).text()+'" /><input type="hidden" id="pricing_'+index+'" name="pricing_'+index+'" value="'+$('div#shop-prices ul li:eq('+index+')').text()+'" /></div><div class="order-row-lt" id="linetotal_'+index+'">0.00</div></div><div class="lowclearer"></div>');
  });
  
  $('select.watchme').each(function() {
    $(this).change(function() {
      // update each of the lines
      $('div#shop-items ul li').each(function(index) {
        var linetotal = 0.00;
        linetotal = Math.round($('select#quantity_'+index).val() * $('input#pricing_'+index).val() * 1000) / 1000;
        $('div#linetotal_'+index).html(linetotal.toFixed(2));
      });
      
      // update the overall total
      var maintotal = 0.00;
      $("div[id^=linetotal]").each(function() {
        maintotal += eval($(this).text());
      });
      
      $("div#maintotal").html(maintotal.toFixed(2));
    });
  });
});