Using Javascript, HTML, JQuery & CSS how can I set a variable depending on a HTML Select OnChange, do calculations and update instantly?

I am building a pool pump calculator. My html onchange works perfectly, but I am having trouble passing which Div is active into my Javascript If Else and updating the outputs for each Else. Note that not all features seem to work on JSFiddle, but they work perfectly on a live page.

Here's what I want it to do:

Depending on the users selection using a HTML Select onChange, a certain Div is displayed using display:block;. Divs from the other selection options are set to display:none; in CSS so they are then hidden and only the correct Div is displayed for each selection. This is the Pool Shape. A variable needs to be set which I am naming PoolShape and I have attempt to make the results of this a String with the Results of "Rectangle", "Oval", "Round" or "Oblong", again depending on the Select onChange.

I am then wanting to add into my Javascript an If Else so that if PoolShape = "Rectangle" then do some calculations, else if PoolShape = "Oval" then do differenet calculations etc for the Results on Tab 3 (Calc-Tab-3).

And finally, there is a DropDown box on the Results Tab 3 (Calc-Tab-3) which will alter one variable in the calculation by calling the function UpdateComparisonPump(); which again searches for the PoolShape and recalculates this section using the newly selected DropDown option StandardPumpSize.

All other calculations on the tabs work fine, apart from this whole PoolShape If Else scenario.

Any help is appreciated.

Here is the HTML I am using:

<span>
What is the shape of your pool:
<label class="radio-container"><input onchange="change('Rectangle-container');RectangleContainerChange();" type="radio" name="radio" id="RectangleCheck" checked="checked"><span class="radio-checkmark"></span>Rectangle
</label><label class="radio-container"><input onchange="change('Oval-container');OvalContainerChange();" type="radio" name="radio" id="OvalCheck"><span class="radio-checkmark"></span>Oval</label><label class="radio-container"><input onchange="change('Round-container');RoundContainerChange();" type="radio" name="radio" id="RoundCheck"><span class="radio-checkmark"></span>Round</label><label class="radio-container"><input onchange="change('Oblong-container');OblongContainerChange();" type="radio" name="radio" id="OblongCheck"><span class="radio-checkmark"></span>Custom Oblong</label>
</span>

<div id="Rectangle-container">
Length of your pool in feet: <input type="number" class="tabinput" id="Length" min="1">

Width of your pool in feet: <input type="number" class="tabinput" id="Width" min="1">

Depth of your pool in feet: <input type="number" class="tabinput" id="Depth" min="1">
</div>

<div id="Oval-container">
Half the length of your pool in feet: <input type="number" class="tabinput" id="HalfLength" min="1">

Half the width of your pool in feet: <input type="number" class="tabinput" id="HalfWidth" min="1">

Depth of your pool in feet: <input type="number" class="tabinput" id="OvalDepth" min="1">
</div>

<div id="Round-container">
Radius of your pool in feet: <input type="number" class="tabinput" id="RoundRadius" min="1">

Depth of your pool in feet: <input type="number" class="tabinput" id="RoundDepth" min="1">
</div>

<div id="Oblong-container">
Small diameter of your pool in feet: <input type="number" class="tabinput" id="SmallDiameter" min="1">

Large diameter of your pool in feet: <input type="number" class="tabinput" id="LargeDiameter" min="1">

Length of your pool in feet: <input type="number" class="tabinput" id="OblongLength" min="1">
</div>

<input type="button" class="CalcButtons" onclick="document.getElementById('Calc-Tab-1').style.display='none';document.getElementById('Calc-Tab-2').style.display='block';" value="Next">
</div>
<div id="Calc-Tab-2" class="CalcTabs">
<h3 class="CalcHeaders">Energy Consumption</h3>
<span>What are the voltage, ampage and kilowatt per hour of your pump?</span>

Volts: <input type="number" class="tabinput" id="Volts" min="1">

Amps: <input type="number" class="tabinput" id="Amps" min="1">

Cost per kWh: <input type="number" class="tabinput" id="CostPerKwh" min="1">

<span>How many hours do you run your pump for:&nbsp;<span class="slideOutputValueHours" id="myHoursRan">7</span> Hours
<input type="range" class="slideInputValueHours slider" id="slideRangeHours" value="7" min="1" max="24" step="1" oninput="myHoursPumpIsRunFunction()">

<input type="button" class="CalcButtons" onclick="document.getElementById('Calc-Tab-2').style.display='none';document.getElementById('Calc-Tab-1').style.display='block';" value="Previous">
<input type="button" class="CalcButtons" onclick="GetTheResults();" value="Calculate Results">
</div>
<div id="Calc-Tab-3" class="CalcTabs">
<h3 class="CalcHeaders">Results & Savings</h3>
<strong>Your pools total expenditures</strong>

Total kWh per day: <span id="ResultsKwhPerDay"></span> KWh per day
Total Cost per day: <span id="ResultsCostPerDay"></span> Thai Baht
Total Cost per month: <span id="ResultsCostPerMonth"></span> Thai Baht based on 30 days
Total Cost per year: <span id="ResultsCostPerYear"></span> Thai Baht per year

<strong>The amount of liters in your pool</strong>

Total liters in your pool: <span id="ResultsTotalLiters"></span> Liters

<strong>The run-time of your pool</strong>

Liters per hour: <span id="ResultsLitersPerHour"></span> Per hour
Time to complete 1 turnover: <span id="ResultsTurnoverTime"></span> Hour
Total turnovers per 24 hour: <span id="ResultsTotalTurnovers"></span> Turnovers

<strong>And here are your savings compared to a <select id="StandardPumpSize" onchange="UpdateComparisonPump()"><option value="1.26">.75hp standard pump</option><option value="1.72">1hp standard pump</option><option value="2.14">1.5hp standard pump</option><option selected value="2.25">2hp standard pump</option><option value="2.62">2.5hp standard pump</option><option value="3.17">3hp standard pump</option><option value="3.5">3.5hp standard pump</option><option value="4">4hp standard pump</option><option value="4.5">4.5hp standard pump</option><option value="5">5hp standard pump</option><option value="5.5">5.5hp standard pump</option><option value="1">variable speed pump</option></select></strong>

Savings per day: <span id="ResultsSavingsPerDay"></span> Thai Baht
Savings per month: <span id="ResultsSavingsPerMonth"></span> Thai Baht
Savings per year: <span id="ResultsSavingsPerYear"></span> Thai Baht
Percentage saved per year: <span id="ResultsSavingsPercentage"></span>% Saved!
</div>

Here are my Javascript and variables being used throughout:

<script>
function GetTheResults() {
var PoolShape = "Rectangle";
var Volts = parseInt(document.getElementById('Volts').value);
var Amps = parseInt(document.getElementById('Amps').value);
var HoursPumpIsRan = parseInt(document.getElementById('slideRangeHours').value);
var KwhPerDay = (Volts * Amps) / 1000 * HoursPumpIsRan;
var CostPerKwh = parseInt( document.getElementById('CostPerKwh').value);
var CostPerDay = KwhPerDay * CostPerKwh;
var CostPerMonth = CostPerDay * 30;
var CostPerYear = CostPerDay * 365;
var Length = parseInt(document.getElementById('Length').value);
var Width = parseInt(document.getElementById('Width').value);
var Depth = parseInt(document.getElementById('Depth').value);
var RectangleTotalLiters = Length * Width * Depth * 7.48;
var HalfLength = parseInt(document.getElementById('HalfLength').value);
var HalfWidth = parseInt(document.getElementById('HalfWidth').value);
var OvalDepth = parseInt(document.getElementById('OvalDepth').value);
var OvalTotalLiters = HalfLength * HalfWidth * 3.14 * 7.48;
var RoundRadius = parseInt(document.getElementById('RoundRadius').value);
var RoundDepth = parseInt(document.getElementById('RoundDepth').value);
var RoundTotalLiters = RoundRadius * RoundRadius * RoundDepth * 7.48;
var SmallDiameter = parseInt(document.getElementById('SmallDiameter').value);
var LargeDiameter = parseInt(document.getElementById('LargeDiameter').value);
var OblongLength = parseInt(document.getElementById('OblongLength').value);
var OblongTotalLiters = SmallDiameter * LargeDiameter * OblongLength * 3.142 * 7.48; 
var FlowRate = parseInt(document.getElementById('FlowRate').value);
var LitersPerHour = FlowRate * 60;
var RectangleTurnoverTime = RectangleTotalLiters / LitersPerHour;
var OvalTurnoverTime = OvalTotalLiters / LitersPerHour;
var RoundTurnoverTime = RoundTotalLiters / LitersPerHour;
var OblongTurnoverTime = OblongTotalLiters / LitersPerHour;
var RectangleTotalTurnovers = 24 / RectangleTurnoverTime;
var OvalTotalTurnovers = 24 / OvalTurnoverTime;
var RoundTotalTurnovers = 24 / RoundTurnoverTime;
var OblongTotalTurnovers = 24 / OblongTurnoverTime;
var StandardPumpSize = parseInt(document.getElementById('StandardPumpSize').value);
var StandardCostPerYear = StandardPumpSize * myHoursRan * CostPerkWh * 365;
var SavingsPerYear = StandardCostPerYear - CostPerYear;
var SavingsPerMonth = SavingsPerYear / 12;
var SavingsPerDay = SavingsPerYear / 365;
var SavingsPercentage = SavingsPerYear / StandardCostPerYear * 100;
/* IF ELSE to define which radio button is selected, and if x is selected then provide the correct output */
if (PoolShape == "Rectangle") {
document.getElementById("ResultsTotalLiters").innerHTML = RectangleTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = RectangleTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RectangleTotalTurnovers;
}
Else (if PoolShape == "Oval") {
document.getElementById("ResultsTotalLiters").innerHTML = OvalTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OvalTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OvalTotalTurnovers;
}
Else if (PoolShape == "Round") {
document.getElementById("ResultsTotalLiters").innerHTML = RoundTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = RoundTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RoundTotalTurnovers;
}
Else if (PoolShape == "Oblong") {
document.getElementById("ResultsTotalLiters").innerHTML = OblongTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OblongTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OblongTotalTurnovers;
}
document.getElementById("ResultsLitersPerHour").innerHTML = LitersPerHour;
document.getElementById("ResultsSavingsPerDay").innerHTML = SavingsPerDay;
document.getElementById("ResultsSavingsPerMonth").innerHTML = SavingsPerMonth;
document.getElementById("ResultsSavingsPerYear").innerHTML = SavingsPerYear;
document.getElementById("ResultsSavingsPercentage").innerHTML = SavingsPercentage;
}
</script>

<script>
/* This sets the PoolShape string from our radio button selections */
Function RectangleContainerChange() {
PoolShape == "Rectangle";
}
Function OvalContainerChange() {
PoolShape == "Oval";
}
Function RoundContainerChange() {
PoolShape == "Round";
}
Function OblongContainerChange() {
PoolShape == "Oblong";
}
</script>

<script>
/* This updates the Comparison with the Select Onchange from the Dropdown which should be a live comparison in addition to the initial comparison in GetTheResults() */
Function UpdateComparisonPump() {
if (PoolShape == "Rectangle") {
document.getElementById("ResultsTotalLiters").innerHTML = RectangleTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = RectangleTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RectangleTotalTurnovers;
}
Else (if PoolShape == "Oval") {
document.getElementById("ResultsTotalLiters").innerHTML = OvalTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OvalTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OvalTotalTurnovers;
}
Else if (PoolShape == "Round") {
document.getElementById("ResultsTotalLiters").innerHTML = RoundTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = RoundTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RoundTotalTurnovers;
}
Else if (PoolShape == "Oblong") {
document.getElementById("ResultsTotalLiters").innerHTML = OblongTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OblongTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OblongTotalTurnovers;
}
document.getElementById("ResultsSavingsPerDay").innerHTML = SavingsPerDay;
document.getElementById("ResultsSavingsPerMonth").innerHTML = SavingsPerMonth;
document.getElementById("ResultsSavingsPerYear").innerHTML = SavingsPerYear;
document.getElementById("ResultsSavingsPercentage").innerHTML = SavingsPercentage;
}
</script>

And here is some CSS to help display everything:

/*--------------------------------------------------------------
Only displays the first Tab on load
--------------------------------------------------------------*/
.Calc-Tab-1 {
display:block;
}

/*--------------------------------------------------------------
Hide the other tabs on load
--------------------------------------------------------------*/

.Calc-Tab-2,
.Calc-Tab-3 {
display:none;
}

/*--------------------------------------------------------------
Calculator preferences
--------------------------------------------------------------*/

.CalcButtons {
    margin-bottom: 1em!important;
}

.CalcHeaders {
    margin-top: 1em!important;
}

#Calc-Tab-1,
#Calc-Tab-2,
#Calc-Tab-3 {
  padding: 10px;
}

/*--------------------------------------------------------------
Calculator - Hide Pool Shape Divs
--------------------------------------------------------------*/
#Oval-container,
#Round-container,
#Oblong-container {
  display: none;
}

/*--------------------------------------------------------------
Calculator - Tabs display
--------------------------------------------------------------*/
#Calc-Tab-1,
#Calc-Tab-2,
#Calc-Tab-3 {
  display: none;
}

.CalcTabs {
  background: #f9f9f9 !important;
  border-radius: 20px !important;
  padding: 15px !important;
}
/*--------------------------------------------------------------
Calculator form slider
--------------------------------------------------------------*/

.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 80%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #01ace4;
    cursor: pointer;
}

.slider::-webkit-slider-thumb:hover {
    background: #266ee4;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #01ace4;
    cursor: pointer;
}

.slider::-moz-range-thumb:hover {
    background: #266ee4;

}

/*--------------------------------------------------------------
Calculator replace default radio button
--------------------------------------------------------------*/

/* Hide the browser's default radio button */
.radio-container {
    display: inline-block;
    position: relative;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/*--------------------------------------------------------------
Colors the radio buttons
--------------------------------------------------------------*/

/* Create a custom radio button */
.radio-checkmark {
    position: absolute;
    top: 0;
    left: 10px;
      margin-right: 10px;
    height: 25px;
    width: 25px;
    background-color: #d3d3d3;
    opacity: 0.7;
    border-radius: 50%;
}

/*On mouse-over, add a grey background color */
.radio-container:hover input ~ .radio-checkmark {
    background-color: #ccc;
    opacity: 1;
}

/*When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radio-checkmark {
    background-color: #01ace4;
}

/*When the radio button is checked and hovered, add a dark blue circle */
.radio-container input:checked~.radio-checkmark:hover {
    background-color: #266ee4 !important;
    opacity: 1;
}