JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Rice 'n Beans Shop</h2>
<p>Click 'Add' to add items to your cart, 'Del' to remove.</p>
<table id="centerElem">
    <thead>
        <tr>
            <td>Dish Name</td>
            <td>Discription</td>
            <td>Ingredients</td>
            <td>Type</td>
            <td>Price</td>
            <td>Actions</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='name'>Rice </td>
            <td>white parboiled rice</td>
            <td>rice</td>
            <td>none</td>
            <td>300</td>
            <td>
                <a href="#" class="action add" data-product="rice">Add</a> 
                <a href="#" class="action del" data-product="rice">Del</a> 
            </td>
        </tr>
        <tr>
            <td class='name'>Beans </td>
            <td>parboiled beans</td>
            <td>beans and salt</td>
            <td>none</td>
            <td>400</td>
            <td>
                <a href="#" class="action add" data-product="beans">Add</a> 
                <a href="#" class="action del" data-product="beans">Del</a> 
            </td>
        </tr>
    </tbody>
</table>
<hr/>
<div class="cart">
    <p>No items in your cart.</p>
</div>

JavaScript

var products = {
    rice: {name: 'Rice', description: 'White parboiled rice', price: 300},
    beans: {name: 'Beans', description: 'Parboiled beans', price: 400}
};

var cart = {
    rice: {quantity: 0, subtotal: 0},
    beans: {quantity: 0, subtotal: 0}
};

$('a.action.add').click(add);
$('a.action.del').click(del);

function add() {
    var product = $(this).attr('data-product');
    cart[product].quantity++;
    cart[product].subtotal += products[product].price;
    renderCart();
}

function del() {
    var product = $(this).attr('data-product');
    if (cart[product].quantity > 0) {
        cart[product].quantity--;
        cart[product].subtotal -= products[product].price;
    }
    renderCart();
}

function renderCart() {
    var cartElem = $('.cart');
    var result = '', items = 0;
    for (var product in cart) {
        var qty = cart[product].quantity;
        if (qty > 0) {
            items++;
            result += '<tr>';
            result += '<td>' + qty + '</td>';
            result += '<td>' + products[product].name + '</td>';
            result += '<td>' + products[product].description + '</td>';
            result += '<td>' + products[product].price + '</td>';
            result += '<td>' + cart[product].subtotal + '</td>';
            result += '</tr>';
        }
    }
    
    cartElem[0].innerHTML = items > 0 ? 
        '<table style="width:100%; border:1px solid black;">' + result + '</table>' :
        '<p>No items in your cart.</p>';
}