I'm doing an online shop for the first time so i'm still getting into grasps with this.

The first task, which is retrieving the items info and putting them in the cart doesn't work, therefore i cannot check if the other tasks are also working (like price calculation, increase/decrease price and remove cart display when item is there or is not)

The articles info is inside a custom data-attribute so i'm trying to retrieve it. I've made a fiddle that you can check below:

Shopping Cart

Here is my HTML code:

2. <main>
3.       <section id="is-shopContainer">
4.     <article id="section-shop">
5.       <h2>Online Shop</h2>
6.       <p>Articles available.</p>      
7.       <ol>
8.         <li>
9.           <div>
10.             <h3>FlipFlops</h3>
11.             <p>Beach shoes.</p>
12.           </div>
13.           <footer>
14.             <p>&euro;5</p>
15.             <button data-shop-listing='{"name": "FlipFlops", "description": "FlipFlops", "price": 5.00}'>Add to cart</button>
16.           </footer>
17.         </li>
18.         <li>
19.           <div>
20.             <h3>Raquet</h3>
21.             <p>Play it</p>
22.           </div>
23.           <footer>
24.             <p>&euro;12.99</p>
25.             <button data-shop-listing='{"name": "Raquet", "description": "Play the Raquet", "price": 12.99}'>Add to cart</button>
26.           </footer>
27.         </li>
28.         <li>
29.           <div>
30.             <h3>Balls</h3>
31.             <p>Raquet balls.</p>
32.           </div>
33.           <footer>
34.             <p>&euro;9.99</p>
35.             <button data-shop-listing='{"name": "Balls", "description": "Balls.", "price": 9.99}'>Add to cart</button>
36.           </footer>
37.         </li>
38.         <li>
39.           <div>
40.             <h3>Buoy</h3>
41.             <p>A buoy</p>
42.           </div>
43.           <footer>
44.             <p>&euro;2.50</p>
45.             <button data-shop-listing='{"name": "Buoy", "description": "A buoy", "price": 5.50}'>Add to cart</button>
46.           </footer>
47.         </li>
48.       </ol>
49.     </article>
50.       </section>
51.     <article id="section-shoppingcart">
52.       <h2>Your shopping cart</h2>
53.       <p>&hellip;is empty.</p>
54.       <form id="shoppingcart-form">
55.         <table>
56.           <thead>
57.             <tr>
58.               <th>Product</th>
59.               <th>Price</th>
60.               <th>Quantity</th>
61.             </tr>
62.           </thead>
63.           <tbody>
64.             <tr>
65.               <td>
66.                 <h3></h3>
67.                 <p></p>
68.                 <div>
69.                   <button>Remove</button>
70.                 </div>
71.               </td>
72.               <td>
73.                 <output></output>
74.               </td>
75.               <td>
76.                 <input type="number" min="1" value="1">
77.                 <span>
78.                 <button type="button" aria-label="decrease">
79.                 -
80.                 </button>
81.                 <button type="button" aria-label="step up">
82.                 +
83.                 </button>
84.                 </span>
85.               </td>
86.             </tr>
87.           </tbody>
88.           <tfoot>
89.             <tr>
90.               <td colspan="3">
91.                 <ol>
92.                   <li>
93.                     <label>Price before <abbr title="Value Added Tax">VAT</abbr>:</label>
94.                     <output></output>
95.                   </li>
96.                   <li>
97.                     <label><abbr title="Value Added Tax">VAT</abbr> @ <strong>20</strong>%:</label>
98.                     <output></output>
99.                   </li>
100.                   <li>
101.                     <label>Total to be paid:</label>
102.                     <output></output>
103.                   </li>
104.                 </ol>
105.               </td>
106.             </tr>
107.           </tfoot>
108.         </table>
109.         <footer>
110.           <p>            
111.           </p>
112.           <a href="#"></a> <button type="submit" form="shoppingcart-form">Proceed to Checkout</button>
113.         </footer>
114.       </form>
115.     </article>
116.   </main>

And my jQuery

2. $(document).ready(function(){
3.   
4. //add items to cart
5.     var itemData = $('#section-shop button').each(function(){
6.         $(this).on('click', function(){                   
7.         $(this).data('shop-listing', function(product, description, price){
8.             product.appendTo('#shoppingcart-form tbody tr td h3');
9.             description.appendTo('#shoppingcart-form tbody tr td p');
10.             price.appendTo('#shoppingcart-form output');
11.             
12.             //get input label to increase/decrease number
13.             var inp = $('#shoppingcart-form tbody tr td:last-child input').val();
14.             
15.             //increase/decrease price
16.             var totalPrice = price;
17.             totalPrice.appendTo('#shoppingcart-form tfoot ol li:first-child output');
18.             
19.             if($('#shoppingcart-form tbody button:first-child').click(function(){
20.                 price++;
21.                 totalPrice++;
22.                 inp++;
23.             }));            
24.             
25.             if($('#shoppingcart-form tbody button:last-child').click(function(){
26.                 price--;
27.                 totalPrice--;
28.                 inp--;
29.             }));
30.             
31.             //add VAT
32.             var VAT = totalPrice * 20/100;
33.             VAT.appendTo('#shoppingcart-form tfoot ol li:nth-child(2) output');
34.             
35.             //Total Price with VAT
36.             var total = VAT;
37.             
38.             //print total price
39.             total.appendTo('#shoppingcart-form tfoot ol li:last-child output');
40.           });
41.         });
42.     });
43.     
44. //show/hide shopping cart when first item is choosen or is empty
45. var shoppingCart = $('#section-shoppingcart');
46.     
47.    if(shoppingCart.length > 0) {
48.        $(this).css('opacity', 1);
49.    } else {
50.        $(this).css('opacity', 0);
51.    }
52.    
53.     //remove items from the cart
54.     $('#shoppingcart-form tbody tr td:first-child div button').on('click', function() {
55.        $(this).remove(itemData); 
56.     });
57.     console.log(itemData);
58.     
59.     //Checkout button inactive
60.     $('#shoppingcart-form footer button').on('click', function(e){
61.         e.preventDefault();
62.         $(this).attr('disabled', 'disabled').prop('disabled', true).css('opacity', '0.5');
63.        $(this).text('Processing');        
64.     });
65. });

How can i retrieve the items to the shopping cart?

Any help is appreciated.