JSFiddle - React, Tailwind, and code Playground

by robertpurpose

HTML

<form name="CostEst">
    <table border="1" cellspacing="0" width="100%" id="AutoNumber1">
        <tr bgcolor="#a9c0e6">
            <td width="494" colspan="3" height="22">
                <p align="center"><b><span class="style2">2012-13 Estimated Cost  of Attendance<br />	</span> </b> 
                </p>
            </td>
        </tr>
        <tr>
            <td rowspan="2" colspan="1" width="99" bgcolor="#e5ecfc"><b>Student profile</b>

            </td>
            <td colspan="2" width="391" bgcolor="#e5ecfc"> <font size="1"> 
          <input type="radio" value="NO" name="Resident" id="Res1" checked onClick="updateTotal();">Resident of 
        Indiana<br>
        <input type="radio" value="NO2" name="Resident" id="Res11" onClick="updateTotal();">Non-Resident 
		Top Scholar<br>
        <input type="radio" value="YES2" name="Resident" id="Res2" onClick="updateTotal();">Regional 
		Academic Scholarship<br>
        <input type="radio" value="YES3" name="Resident" id="Res3" onClick="updateTotal();">Non-resident 
		Grant recipient<br>
        <input type="radio" value="YES4" name="Resident" id="Res4" onClick="updateTotal();">Non-resident of Indiana</font>

            </td>
        </tr>
        <tr>
            <td colspan="2" width="391" bgcolor="#e5ecfc"> <font size="1"> 
          <input type="radio" value="Undergraduate" name="Degree" id="Deg0" onClick="updateTotal(60);" checked="checked">Undergraduate<br>
        <input type="radio" value="Graduate" name="Degree" id="Deg1" onClick="updateTotal();">Graduate (Masters 
        degree or beyond)<br>
		<input onClick="updateTotal();" type="radio" id="Deg2" value="Graduate1" name="Degree">Graduate&nbsp; 
		Non-Resident (Masters degree or beyond)<br>
        <input type="radio" value="Distance_Graduate" id="Deg3" name="Degree" onClick="updateTotal();">Distance 
        Education-Only (Undergraduate)<br>
        <input type="radio" value="Distance_UnderGraduate" id="Deg4" name="Degree"...

JavaScript

function updateTotal() {

    var total;
    var TheIndex;
    var TheIndex_FoodPlan;
    var i;
    var total_semester;
    var total_year;
    var additional_costs;
    var InstructionalCost;

    total = 0;

    if ($("#Deg0").attr('checked') && $("#Res0").attr('checked')) {
        $("#TuitionPerHour").val(202.83);
    }

    if ($("#Deg0").attr('checked') && $("#Res1").attr('checked')) {
        $("#TuitionPerHour").val(202.83);
    }
    if ($("#Deg0").attr('checked') && $("#Res11").attr('checked')) {
        $("#TuitionPerHour").val(202.83);
    }

    if ($("#Deg0").attr('checked') && $("#Res2").attr('checked')) {
        $("#TuitionPerHour").val(parseFloat(243.39).toFixed(2));
    }

    if ($("#Deg0").attr('checked') && $("#Res3").attr('checked')) {
        $("#TuitionPerHour").val(parseFloat(304.24).toFixed(2));
    }

    if ($("#Deg0").attr('checked') && $("#Res4").attr('checked')) {
        $("#TuitionPerHour").val(482.83);
    }

    if ($("#Deg1").attr('checked')) {
        $("#TuitionPerHour").val(294.44);
    }

    if ($("#Deg2").attr('checked')) {
        $("#TuitionPerHour").val(580.68);
    }

    if ($("#Deg3").attr('checked')) {
        $("#TuitionPerHour").val(202.83);
    }

    if ($("#Deg4").attr('checked')) {
        $("#TuitionPerHour").val(294.44);
    }


    total = parseFloat(total + (parseFloat($("#SemesterHours").val()) * parseFloat($("#TuitionPerHour").val())));

    $("#TuitionCost").val(total.toFixed(2));
    InstructionalCost = total;

    total = parseFloat(total + parseFloat($("input[name='Housing']:checked").val()));

    /* Add in Health Service fee $40 if there is housing*/
    if ($("input[name='Housing']:checked").val() == "0") {
        $("#HealthService").val(0);
    }
    else {
        total = parseFloat(total + 47);
        $("#HealthService").val(47);
    }

    /*Add in FoodPlan fee*/
    for (i = 0; i < document.CostEst.FoodPlan.length; i++) {
        if (document.CostEst.FoodPlan[i].checked) {
           ...