JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" onclick="window.addToCart(0);">Add Catch Arena</a>
<a href="#" onclick="addToCart(1);">Add Pepperonni</a>
<a href="#" onclick="addToCart(2);">Add Fruits de Mer</a>
<a href="#" onclick="addToCart(3);">Add Chickenita</a>

<div id="ShoppingCart">Your cart is empty</div>

JavaScript

var cart = [];

var items = [
    {id:1, price:100, name:"Catch Arena"},
    {id:2, price:400, name:"Pepperonni"},
    {id:3, price:1400, name:"Fruits de Mer"},
    {id:4, price:1400, name:"Chickenita"}
];

window.addToCart = function(idx) {
   cart.push(items[idx]);
   displayCart();
};

window.displayCart = function() {
    var cartHtml = [];
    for (i=0; i<cart.length; i++) {
        cartHtml.push("<div>" + cart[i].name + ", " + cart[i].price + "</div>");
    }
    $('#ShoppingCart').html(cartHtml.join(''));
};