JSFiddle - React, Tailwind, and code Playground

HTML

<form id="calculator" action="#" method="get">
     <h1>Cake Cost Estimator</h1>

     <h3>Round Cakes:</h3>

    <fieldset id="round">
        <table>
            <tr>
                <td>
                    <label>6" Round Cake (6-8):</label>
                </td>
                <td>
                    <input id="6round" class="amountBox" data-var="sixround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>8" Round Cake (12-15):</label>
                </td>
                <td>
                    <input id="8round" class="amountBox" data-var="eightround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>9" Round Cake (20-24):</label>
                </td>
                <td>
                    <input id="9round" class="amountBox" data-var="nineround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>10" Round Cake (26-30):</label>
                </td>
                <td>
                    <input id="10round" class="amountBox" data-var="tenround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>12" Round Cake (34-38):</label>
                </td>
                <td>
                    <input id="12round" class="amountBox" data-var="twelveround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>14" Round Cake (46-50):</label>
                </td>
                <td>
                    <input id="14round" class="amountBox" data-var="fourteenround" type="text" placeholder=0>
                </td>
            </tr>
        </table>
    </fieldset>
     <h3>Square Cakes:</h3>

    <fieldset id="square">
        <table>
            <tr>
          ...

JavaScript

//Prices

$(document).ready(function () {
    var priceList = {
        sixround : 39.95,
        eightround : 45.95,
        nineround : 52.95,
        tenround : 60.95,
        twelveround : 74.95,
        fourteenround : 89.95,
        sixsquare : 45.95,
        eightsquare : 52.95,
        ninesquare : 60.95,
        tensquare : 74.95,
        twelvesquare : 99.95,
        fourteensquare : 116.95,
        quarterSheet : 37.95,
        halfSheet : 62.94,
        fullSheet : 95.95,
        basicCupcake : 2.25,
        standardCupcake : 2.50,
        premiumCupcake : 2.75
    };

    $('.amountBox').on('change', function(){
        var value = $(this).val();
        var price = priceList[$(this).data('var')];
        $(this).val((value*price).toFixed(2));
        $('#total').val('0');
        
        $('.amountBox').each(function(){
            if(!isNaN(parseFloat($(this).val()))){
                $('#total').val((parseFloat($('#total').val()) + parseFloat($(this).val())).toFixed(2));
            }
        });
    });
 
});