How to insert multiple items in the cart and increment / decrease the price in jQuery

Good to everyone

I'm doing a shopping cart and want to add more items to the cart and update the total price.

The structure of the cart is made in a table. Will I have to generate more HTML to add more items? I'm only putting one item at a time into the cart because every time I click the add button, it's simply replaced with another instead of adding.

Here's my code:

HTML

<main>
<section id="is-shopContainer">
<article id="section-shop">
<h2>Online Shop</h2>
<p>Articles available.</p>      
<ol>
<li>
  <div>
    <h3>FlipFlops</h3>
    <p>Beach shoes.</p>
  </div>
  <footer>
    <p>&euro;5</p>
    <button data-shop-listing='{"name": "FlipFlops", "description": "FlipFlops", "price": 5.00}'>Add to cart</button>
  </footer>
</li>
<li>
  <div>
    <h3>Raquet</h3>
    <p>Play it</p>
  </div>
  <footer>
    <p>&euro;12.99</p>
    <button data-shop-listing='{"name": "Raquet", "description": "Play the Raquet", "price": 12.99}'>Add to cart</button>
  </footer>
</li>
<li>
  <div>
    <h3>Balls</h3>
    <p>Raquet balls.</p>
  </div>
  <footer>
    <p>&euro;9.99</p>
    <button data-shop-listing='{"name": "Balls", "description": "Balls.", "price": 9.99}'>Add to cart</button>
  </footer>
</li>
<li>
  <div>
    <h3>Buoy</h3>
    <p>A buoy</p>
  </div>
  <footer>
    <p>&euro;2.50</p>
    <button data-shop-listing='{"name": "Buoy", "description": "A buoy", "price": 5.50}'>Add to cart</button>
  </footer>
</li>
</ol>
</article>
</section>
<article id="section-shoppingcart">
<h2>Your shopping cart</h2>
<p>&hellip;is empty.</p>
<form id="shoppingcart-form">
<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <h3></h3>
        <p></p>
        <div>
          <button>Remove</button>
        </div>
      </td>
      <td>
        <output></output>
      </td>
      <td>
        <input type="number" min="1" value="1">
        <span>
        <button type="button" aria-label="decrease">
        -
        </button>
        <button type="button" aria-label="step up">
        +
        </button>
        </span>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">
        <ol>
          <li>
            <label>Price before <abbr title="Value Added Tax">VAT</abbr>:</label>
            <output></output>
          </li>
          <li>
            <label><abbr title="Value Added Tax">VAT</abbr> @ <strong>20</strong>%:</label>
            <output></output>
          </li>
          <li>
            <label>Total to be paid:</label>
            <output></output>
          </li>
        </ol>
      </td>
    </tr>
  </tfoot>
</table>
<footer>
  <p>            
  </p>
  <a href="#"></a> <button type="submit" form="shoppingcart-form">Proceed to Checkout</button>
</footer>

and jQuery

$(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 > 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');        
 });
 });