JSFiddle - React, Tailwind, and code Playground

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>
           ...

JavaScript

$(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; 
            
            console.log(productName);
            console.log(productDescription);
            console.log(productPrice);
            
    $(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();
            
            //increase/decrease price
            var totalPrice = productPrice;
            $('#shoppingcart-form tfoot ol li:first-child output').text(totalPrice);
            
            if($('#shoppingcart-form tbody button:first-child').click(function(){
                price++;
                totalPrice++;
                inp++;
            }));            
            
            if($('#shoppingcart-form tbody button:last-child').click(function(){
                price--;
                totalPrice--;
                inp--;
            }));
            
            //add VAT
            var VAT = 20/100 * totalPrice;
            $('#shoppingcart-form tfoot ol li:nth-child(2) output').text('€' + VAT);
            
            //Total Price with VAT
            var total = VAT + totalPrice;
            
            //print total price
            $('#shoppingcart-form tfoot ol li:last-child output').text('€' + total);        
    });
    });
    
//show/hide shopping cart when first item is choosen or is empty
var shoppingCart =...