title: Adding items to shopping cart using jQuery
body: <p>This is my first try creating the functionalities of a shopping cart so I'm still getting the grasps on this.</p>
  
  <p>While I can add an item to the cart, I cannot add another one since when choosing an item the existing item on the cart is removed so i just substituting one for another. </p>
  
  <p>How do i add an item to the cart and update the total price?</p>
  
  <p>I've made a jsfiddle below but I will also post the code here:</p>
  
  <p><a href="https://jsfiddle.net/p9sakndy/23/" rel="nofollow noreferrer">Shopping cart fiddle</a></p>
  
  <p><strong>The HTML</strong></p>
  
  <pre><code>&lt;main&gt;
    &lt;section id="is-shopContainer"&gt;
  &lt;article id="section-shop"&gt;
    &lt;h2&gt;Online Shop&lt;/h2&gt;
    &lt;p&gt;Articles available.&lt;/p&gt;      
    &lt;ol&gt;
      &lt;li&gt;
        &lt;div&gt;
          &lt;h3&gt;FlipFlops&lt;/h3&gt;
          &lt;p&gt;Beach shoes.&lt;/p&gt;
        &lt;/div&gt;
        &lt;footer&gt;
          &lt;p&gt;&amp;euro;5&lt;/p&gt;
          &lt;button data-shop-listing='{"name": "FlipFlops", "description": "FlipFlops", "price": 5.00}'&gt;Add to cart&lt;/button&gt;
        &lt;/footer&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div&gt;
          &lt;h3&gt;Raquet&lt;/h3&gt;
          &lt;p&gt;Play it&lt;/p&gt;
        &lt;/div&gt;
        &lt;footer&gt;
          &lt;p&gt;&amp;euro;12.99&lt;/p&gt;
          &lt;button data-shop-listing='{"name": "Raquet", "description": "Play the Raquet", "price": 12.99}'&gt;Add to cart&lt;/button&gt;
        &lt;/footer&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div&gt;
          &lt;h3&gt;Balls&lt;/h3&gt;
          &lt;p&gt;Raquet balls.&lt;/p&gt;
        &lt;/div&gt;
        &lt;footer&gt;
          &lt;p&gt;&amp;euro;9.99&lt;/p&gt;
          &lt;button data-shop-listing='{"name": "Balls", "description": "Balls.", "price": 9.99}'&gt;Add to cart&lt;/button&gt;
        &lt;/footer&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div&gt;
          &lt;h3&gt;Buoy&lt;/h3&gt;
          &lt;p&gt;A buoy&lt;/p&gt;
        &lt;/div&gt;
        &lt;footer&gt;
          &lt;p&gt;&amp;euro;2.50&lt;/p&gt;
          &lt;button data-shop-listing='{"name": "Buoy", "description": "A buoy", "price": 5.50}'&gt;Add to cart&lt;/button&gt;
        &lt;/footer&gt;
      &lt;/li&gt;
    &lt;/ol&gt;
  &lt;/article&gt;
    &lt;/section&gt;
  &lt;article id="section-shoppingcart"&gt;
    &lt;h2&gt;Your shopping cart&lt;/h2&gt;
    &lt;p&gt;&amp;hellip;is empty.&lt;/p&gt;
    &lt;form id="shoppingcart-form"&gt;
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Product&lt;/th&gt;
            &lt;th&gt;Price&lt;/th&gt;
            &lt;th&gt;Quantity&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;h3&gt;&lt;/h3&gt;
              &lt;p&gt;&lt;/p&gt;
              &lt;div&gt;
                &lt;button&gt;Remove&lt;/button&gt;
              &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;output&gt;&lt;/output&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="number" min="1" value="1"&gt;
              &lt;span&gt;
              &lt;button type="button" aria-label="decrease"&gt;
              -
              &lt;/button&gt;
              &lt;button type="button" aria-label="step up"&gt;
              +
              &lt;/button&gt;
              &lt;/span&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
        &lt;tfoot&gt;
          &lt;tr&gt;
            &lt;td colspan="3"&gt;
              &lt;ol&gt;
                &lt;li&gt;
                  &lt;label&gt;Price before &lt;abbr title="Value Added Tax"&gt;VAT&lt;/abbr&gt;:&lt;/label&gt;
                  &lt;output&gt;&lt;/output&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;label&gt;&lt;abbr title="Value Added Tax"&gt;VAT&lt;/abbr&gt; @ &lt;strong&gt;20&lt;/strong&gt;%:&lt;/label&gt;
                  &lt;output&gt;&lt;/output&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;label&gt;Total to be paid:&lt;/label&gt;
                  &lt;output&gt;&lt;/output&gt;
                &lt;/li&gt;
              &lt;/ol&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tfoot&gt;
      &lt;/table&gt;
      &lt;footer&gt;
        &lt;p&gt;            
        &lt;/p&gt;
        &lt;a href="#"&gt;&lt;/a&gt; &lt;button type="submit" form="shoppingcart-form"&gt;Proceed to Checkout&lt;/button&gt;
      &lt;/footer&gt;
    &lt;/form&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>And the jQuery</strong></p>
  
  <pre><code>$(document).ready(function(){
  
  //add items to cart           
   var itemData = $('#section-shop button').each(function(){
      var productName = $(this).data('shop-listing').name;
      var productDescription = $(this).data('shop-listing').description;
      var productPrice = $(this).data('shop-listing').price; 
  
  $(this).on('click', function(product, description, price){                         
      $('#shoppingcart-form tbody tr td h3').text(productName);
      $('#shoppingcart-form tbody tr td p').text(productDescription);
      $('#shoppingcart-form output').text('€'+ productPrice);
  
  //get input label to increase/decrease number
  var inp = $('#shoppingcart-form tbody tr td:last-child input').val();
  var inpVal = parseFloat(inp);  
  
  var holdPrice = $('#shoppingcart-form tfoot ol li:first-child output');
  var holdVat = $('#shoppingcart-form tfoot ol li:nth-child(2) output');
  var holdTotal = $('#shoppingcart-form tfoot ol li:last-child output');
  
  //increase/decrease price
  var price = productPrice;
  
  $('#shoppingcart-form table td span button:first-child').on('click', function(){               
  var qty = price / inpVal;
  holdPrice.text(qty);
  });            
  
  $('#shoppingcart-form table td span button:last-child').on('click',function(){
   var qty = price * inpVal;
   holdPrice.text(qty);
  });
  
  //print product price
  holdPrice.text(price);             
  
  //add and print VAT + product price
  var VAT = 20/100 * price;
  holdVat.text('€' + VAT.toFixed(2));
  
  //Total Price with VAT
  var total = VAT + price;
  
  //print total price
  holdTotal.text('€' + total.toFixed(2));    
  
  //new price after item removed
  $('#shoppingcart-form table tbody div button').click(function(e) {
      e.preventDefault();
      $('#shoppingcart-form tbody tr td h3').empty();
      $('#shoppingcart-form tbody tr td p').empty();
      $('#shoppingcart-form output').empty();
      total--; 
      });
  });
  });
  
  //show/hide shopping cart when first item is choosen or is empty
  var shoppingCart = $('#section-shoppingcart');
  
  if(shoppingCart.has(itemData).length &gt; 0) {
     $(this).css('opacity', 1);
  } else {
     $(this).css('opacity', 0);
  }
  
  //Checkout button inactive
  $('#shoppingcart-form footer button').on('click', function(e){
      e.preventDefault();
      $(this).attr('disabled', 'disabled').prop('disabled', true).css('opacity', '0.5');
     $(this).text('Sending your order');        
  });
  });
  </code></pre>
  
  <p>Any help will be appreciated.</p>