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" type="text" class="subtotal" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>8" Round Cake (12-15):</label>
                </td>
                <td>
                    <input id="8round" type="text" class="subtotal" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>9" Round Cake (20-24):</label>
                </td>
                <td>
                    <input id="9round" type="text" class="subtotal" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>10" Round Cake (26-30):</label>
                </td>
                <td>
                    <input id="10round" type="text" class="subtotal" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>12" Round Cake (34-38):</label>
                </td>
                <td>
                    <input id="12round" type="text" class="subtotal" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>14" Round Cake (46-50):</label>
                </td>
                <td>
                    <input id="14round" type="text" class="subtotal" placeholder=0>
                </td>
            </tr>
        </table>
    </fieldset>
     <h3>Square Cakes:</h3>

    <fieldset id="square">
        <table>
            <tr>
                <td>
                    <label>6" Square Cake (8-10):</label>
                </td>
                <td>
                   ...

JavaScript

//Prices

$(document).ready(function () {
    //apparently you can't declare a variable with a number and letter
    var sixround = 39.95;
    var eightround = 45.95;
    var nineround = 52.95;
    var tenround = 60.95;
    var twelveround = 74.95;
    var fourteenround = 89.95;

    var sixsquare = 45.95;
    var eightsquare = 52.95;
    var ninesquare = 60.95;
    var tensquare = 74.95;
    var twelvesquare = 99.95;
    var fourteensquare = 116.95;

    var quarterSheet = 37.95;
    var halfSheet = 62.94;
    var fullSheet = 95.95;

    var basicCupcake = 2.25;
    var standardCupcake = 2.50;
    var premiumCupcake = 2.75;

  
    $(".subtotal").change(function () {
        $("#total").val(0);
        var sum = 0;
        $('.subtotal').each(function () {
            sum += Number($(this).val());
        });

        $("#total").val(sum.toFixed(2));
    });
});