I can't get the subtotal, tax or total of the food items - subtotal

Question

`<li class="menu-item">
<img src="images/fruitypebblesfrenchtoastwvanillaglaze.jpg"
alt="Fruity Pebbles French toast" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">Fruity Pebbles French Toast w
vanilla glaze
</p>
<p class="g-price">$17.00</p>
</div>
<button class = "add-button"
data-title = "Fruity Pebbles French Toast w vanilla glaze"
data-price="17.00">Add to Cart</button>
<div class="total"></div>
</li>
<!-- Menu Item 2 -->
<li class="menu-item">
<img src="images/4hawaiianrollsfrenchtoast.jpg" alt="4 Hawaiin
rolls French Toast" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">4 Hawaiin rolls French Toast
topped w strawberries, bananas, vanilla glaze, whip cream &
powered sugar</p>
<p class="g-price">$16.00</p>
</div>
<button class = "add-button"
data-title = "4 Hawaiin rolls French Toast topped w strawberries,
bananas, vanilla glaze, whip cream & powered sugar"
data-price = "16.00">Add to Cart</button>
<div class = "total"></div>
</li>
<!-- this is the js I created to get subtotal, tax total -->
let subtotal = 0;
price = g-price;
const calculateTax = subtotal => {
const tax = subtotal * 0.13;
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 'Fruity Pebbles French Toast w vanilla glaze':
imgLink =
'https://i.pinimg.com/736x/e9/d2/f9/e9d2f9265ff4c147e2d65d3e90c785ba.jpg';
break;
case '4 Hawaiin rolls French Toast topped w strawberries, bananas,
vanilla glaze, whip cream & powered sugar':
imgLink = 'https://www.bing.com/th?
id=AMMS_854126eb291d301819362a6b9ec7246a&w=164&h=123&rs=2&qlt=80&o=6&cdv=1&dpr=1.45&pid=16.1';
break;
case 'Cinnamon Toast Crunch French Toast w whip cream':
imgLink = 'https://www.foxvalleyfoodie.com/wp-content/uploads/2015/08/capn-crunch-french-toast-with-cinnamon-whipped-cream-recipe.jpg';
break;
case 'Stuffed French Toast caramel & banana cream filling topped w
banana chips, maple syrup & french vanilla ice cream':
imgLink = 'https://www.bing.com/th?id=AMMS_09646475f02c69421e88d828d3fd708a&w=164&h=164&rs=2&qlt=80&o=6&cdv=1&dpr=1.45&pid=16.1';
break;
case 'Stuffed French Toast w strawberries creme filling topped w
` strawberries, bluberries & whip cream':
imgLink = 'https://i2.wp.com/wellplated.com/wp-
content/uploads/2019/04/Best-Overnight-French-Toast-Bake.jpg';
break;
default:
imgLink ='https://i2.wp.com/wellplated.com/wp-
content/uploads/2019/04/Best-Overnight-French-Toast-Bake.jpg';}
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">$${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">$${formattedSubtotal}</span>
</p>
<p class="cart-math-item">
<span class="cart-math-header">Tax:</span>
`<span class="g-price tax">$${tax}</span>
`</p>
`<p class="cart-math-item">
<span class="cart-math-header">Total:</span>
<span class="g-price total">$${total}</span>
`</p>
);
});