HTML:

<div class="row">
<div class="screen-togo">
<h2>To Go Menu</h2>
<ul class="menu-items">
<!-- Menu Item 1 -->
<li class="menu-item">
<img src="./img/plate__french-fries.webp" alt="French Fries
with Ketchup" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">French Fries with Ketchup</p>
<p class="g-price">Rp7.000</p>
</div>
<button class="add-button" data-title="French Fies with
Ketchup" data-price="7000">Add to
Cart</button>
</li>

<!-- Menu Item 2 -->

<li class="menu-item">
<img src="./img/plate__salmon-vegetables.webp" alt="Salmon
and Vegetables" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">Salmon and Vegetables</p>
<p class="g-price">Rp49.000</p>
</div>
<button class="add-button" data-title="Salmon and Vegetables"
data-price="49000">Add to
Cart</button>
</li>

<!-- Menu Item 3 -->

<li class="menu-item">
<img src="./img/plate__spaghetti-meat-sauce.webp"
alt="Spaghetti with Sauce" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">Spaghetti with Sauce</p>
<p class="g-price">Rp12.000</p>
</div>
<button class="add-button" data-title="Spaghetti with Sauce"
data-price="12000">Add to
Cart</button>
</li>

<!-- Menu Item 4 -->

<li class="menu-item">
<img src="./img/plate__tortellini.webp" alt="Tortellini"
class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">Tortellini</p>
<p class="g-price">Rp19.000</p>
</div>
<button class="add-button" data-title="Tortellini" data-
price="19000">Add to Cart</button>
</li>
 <!-- Menu Item 5 -->
<li class="menu-item">
<img src="./img/plate__chicken-salad.webp" alt="Chicken
Salad" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">Chicken Salad</p>
<p class="g-price">Rp20.000</p>
</div>
<button class="add-button" data-title="Chicken Salad" data-
price="20000">Add to Cart</button>
</li>

<!-- Menu Item 6 -->

<li class="menu-item">
<img src="./img/" alt="Mie Goreng + Telur" class="menu-
image">
<div class="menu-item-dets">
<p class="menu-item-heading">Mie Goreng + Telur </p>
<p class="g-price">Rp15.000</p>
</div>
<button class="add-button" data-title="Mie Goreng" data-
price="15000">Add to Cart</button>
</li>

<!-- Menu Item 7 -->

<li class="menu-item">
<img src="./img/" alt="Mie Kuah + Telur" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">Mie Kuah + Telur </p>
<p class="g-price">Rp15.000</p>
</div>
<button class="add-button" data-title="Mie Kuah + Telur"
data-price="15000">Add to Cart</button>
</li>

<!-- Menu Item 8 -->

<li class="menu-item">
<img src="./img/aqua.webp." alt="AQUA" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">AQUA </p>
<p class="g-price">Rp5.000</p>
</div>
<button class="add-button" data-title="AQUA" data-
price="5000">Add to Cart</button>
</li>

<!-- Menu Item 9 -->

<li class="menu-item">
<img src="./img/jusj.jpg" alt="JUS JERUK" class="menu-image">
<div class="menu-item-dets">
 <p class="menu-item-heading">Jus Jeruk</p>
<p class="g-price">Rp6.000</p>
</div>
<button class="add-button" data-title="JUS JERUK" data-
price="6000">Add to Cart</button>
</li>

<!-- Menu Item 10 -->

<li class="menu-item">
<img src="./img/" alt="Jus Alpukat" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">Jus Alpukat</p>
<p class="g-price">Rp10.000</p>
</div>
<button class="add-button" data-title="Jus Alpukat" data-
price="10000">Add to Cart</button>
</li>

<!-- Menu Item 11 -->

<li class="menu-item">
<img src="./img/" alt="Coca Cola " class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">Coca Cola</p>
<p class="g-price">Rp10.000</p>
</div>
<button class="add-button" data-title="Coca Cola" data-
price="10000">Add to Cart</button>
</li>

<!-- Menu Item 12 -->

<li class="menu-item">
<img src="./img/" alt="" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">Coca Cola</p>
<p class="g-price">Rp10.000</p>
</div>
<button class="add-button" data-title="Coca Cola" data-
price="10000">Add to Cart</button>
</li>

</ul>
</div>
<div class="screen-cart">
<h2>Your Cart</h2>
<!-- Cart Items -->
<ul class="cart-items">
</ul>

<div class="cart-math">
<p>Add items to cart</p>
</div>
<form>
<h4><input type="number" min="1" max="17"
id="nomeja"><label>Input Your Number
Table/Computer</label>
</h4>

<button type="submit" id="nomeja">

 <a href="struk.html">Order Now!</a>
</button>

</form>
</div>
</div>
JAVASCRIPT:
let subtotal = 0;

const calculateTax = subtotal => {

const tax = subtotal * 0.1000;
const formattedTax = tax.toFixed(2);
return formattedTax;
};

const calculateTotal = subtotal => {

const tax = calculateTax(subtotal);
const total = parseFloat(subtotal) + parseFloat(tax);
const formattedTotal = total.toFixed(2);
return formattedTotal;
};

const getImgLink = title => {

let imgLink;
switch (title) {
case 'French Fies with Ketchup':
imgLink = './img/plate__french-fries.webp';
break;
case 'Salmon and Vegetables':
imgLink = './img/plate__salmon-vegetables.webp';
break;
case 'Spaghetti with Sauce':
imgLink = './img/plate__spaghetti-meat-sauce.webp';
break;
case 'Tortellini':
imgLink = './img/plate__tortellini.webp';
break;
case 'Chicken Salad':
imgLink = './img/plate__chicken-salad.webp';
break;
case 'AQUA':
imgLink = './img/aqua.webp';
break;
case 'JUS JERUK':
imgLink = './img/jusj.jpg';
break;
default:
imgLink = 'https://assets.codepen.io/687837/plate__chicken-salad.png';
}

return imgLink;
};

$('.add-button').on('click', function () {
const title = $(this).data('title');
const price = $(this).data('price');
const imgLink = getImgLink(title);
 const element = `
<li class="cart-item">
<img src="${imgLink}" alt="${title}">
<div class="cart-item-dets">
<p class="cart-item-heading">${title}</p>
<p class="g-price">Rp${price}</p>
</div>
</li>
`;
$('.cart-items').append(element);

subtotal = subtotal + price;

const formattedSubtotal = subtotal.toFixed(2);

const tax = calculateTax(subtotal);
const total = calculateTotal(subtotal);

$('.cart-math').html(`
<p class="cart-math-item">
<span class="cart-math-header">Subtotal:</span>
<span class="g-price subtotal">Rp${formattedSubtotal}</span>
</p>
<p class="cart-math-item">
<span class="cart-math-header">Tax:</span>
<span class="g-price tax">Rp${tax}</span>
</p>
<p class="cart-math-item">
<span class="cart-math-header">Total:</span>
<span class="g-price total">Rp${total}</span>
</p>
`);
});