JSFiddle - React, Tailwind, and code Playground

HTML

<body onload='hideTotal()'>

<center><h2>Granada Neo</h2></center>

<select id="project_billing_code_id">
    <option value="">Pick one</option>
    <option value="1">1-Hourly</option>
    <option value="2">2-Per Diem</option>
    <option value="3">3-Fixed</option>
</select>

<div id="hourly">Hourly</div>
<div id="per_diem">Per Diem</div>
<div id="fixed">Fixed</div>

    <div id="wrap">
        <form action="" id="GRANADANEO" onsubmit="return false;">
        <div>
            <div class="cont_order">
               <fieldset>
			   <table>
			   <tr>
			   <td>
			   <label >NonTrans</label>
         
                <select id="NonTrans" name='NonTrans' onchange="calculateTotal()">
                <option value="NoneNon">Select Dimensions</option>
                <option value="LemonNon">3,00 6,40 0,85</option>
                <option value="CustardNon">3,00 7,50 0,85</option>
                <option value="FudgeNon">3,00 8,50 0,90</option>
                <option value="MochaNon">3,00 10,00 0,90</option>
                <option value="RaspberryNon">3,00 10,60 0,95</option>
                <option value="PineappleNon">3,00 12,00 0,95</option>
                <option value="DobashNon">3,00 12,70 1,00</option>
                <option value="MintNon">3,25 6,40 0,85</option>
                <option value="CherryNon">3,25 7,50 0,85</option>
                <option value="ApricotNon">3,25 8,50 0,90</option>
                <option value="ButtercreamNon">3,25 10,00 0,90</option>
                <option value="Chocolate MousseNon">3,25 10,60 0,95</option>
               </select>
			   </td>
			   <td>
			   <label >FullTrans</label>
         
                <select id="FullTrans" name='FullTrans' onchange="calculateTotal()">
                <option value="NoneFull">Select Dimensions</option>
                <option value="LemonFull">3,00 6,40 0,85</option>
                <option value="CustardFull">3,00 7,50 0,85</option>
                <option...

CSS

#wrap{
	width:400px;
	margin:0 auto;
	text-align:left;
	margin-top:8px;
	padding:5px;
	background:#fff;
    font-family:AvenirLTStd, Arial, Helvetica, sans-serif;
	font-size:13px;    
    line-height:16px;
}
#wrap .cont_details fieldset,.cont_order fieldset{
	margin:10px;
	padding:20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
#wrap legend{
	font-size:16px;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#000;
	font-weight:bold;
	font-style:italic;
    padding-bottom:10px;
}
#wrap .cont_details input{
	margin-bottom:10px;
	color:#000;
}
#wrap .input1:hover,.input1:active{
	
}
#wrap label{
	display:block;
	font-size:12px;
	color:#000;
    font-weight:bold;
}
#wrap label.inlinelabel
{
    display:inline;
}
#wrap .cont_order input{
	margin-bottom:5px;
}
#wrap .cont_order p{
	padding-top:5px;
}

#wrap input[type="radio"]
{
margin-top:8px;
margin-bottom:8px;
}

#wrap input[type="text"]:hover,
#wrap input[type="text"]:active {
background-color: #FAF398;
}

#wrap input#submit
{
margin:10px;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}

#wrap div#totalPrice
{
    padding:10px;
    font-weight:bold;
    background-color:;
}

#wrap label.radiolabel
{
font-weight:normal;
 display:inline;
}

JavaScript

hideAllDivs = function () {
    $("#hourly").hide();
    $("#per_diem").hide();
    $("#fixed").hide();
};

handleNewSelection = function () {

    hideAllDivs();
    
    switch ($(this).val()) {
        case '1':
            $("#hourly").show();
        break;
        case '2':
            $("#per_diem").show();
        break;
        case '3':
            $("#fixed").show();
        break;
    }
};

$(document).ready(function() {
    
    $("#project_billing_code_id").change(handleNewSelection);
    
    // Run the event handler once now to ensure everything is as it should be
    handleNewSelection.apply($("#project_billing_code_id"));
    
});

 //Set up an associative array 
 //NonTrans
 var NonTrans_prices= new Array();
 NonTrans_prices["NoneNon"]=0;
 NonTrans_prices["LemonNon"]=5994;
 NonTrans_prices["CustardNon"]=7076;
 NonTrans_prices["FudgeNon"]=7742;
 NonTrans_prices["MochaNon"]=8824;
 NonTrans_prices["RaspberryNon"]=9658;
 NonTrans_prices["PineappleNon"]=10740;
 NonTrans_prices["DobashNon"]=11572;
 NonTrans_prices["MintNon"]=6660;
 NonTrans_prices["CherryNon"]=7660;
 NonTrans_prices["ApricotNon"]=8242;
 NonTrans_prices["ButtercreamNon"]=9490;
 NonTrans_prices["Chocolate MousseNon"]=10822;

//NonTrans
function NonTrans()
{
    var NonTransPrice=0;
    //Get a reference to the form id="GRANADANEO"
    var theForm = document.forms["GRANADANEO"];
    //Get a reference to the select id="filling"
     var selectedFilling = theForm.elements["NonTrans"];
     
    //set cakeFilling Price equal to value user chose
    //For example filling_prices["Lemon".value] would be equal to 5
    NonTransPrice = NonTrans_prices[selectedFilling.value];

    //finally we return cakeFillingPrice
    return NonTransPrice;
}

//FullTrans
 var FullTrans_prices= new Array();
 FullTrans_prices["NoneFull"]=0;
 FullTrans_prices["LemonFull"]=7012;
 FullTrans_prices["CustardFull"]=8280;
 FullTrans_prices["FudgeFull"]=9058;
 FullTrans_prices["MochaFull"]=10324;
...