JSFiddle - React, Tailwind, and code Playground

by plasmak

HTML

<style type='text/css'>
</style>
<head>
    <meta name="viewport" content="width = device-width"></meta>
</head>
<style>
</style>
<div data-role="header" data-position="fixed">
    	<h2>Transfusion Medicine Calculator</h2> 
</div>
<!-- navbar -->
<div data-role="navbar">
    <ul>
        <li><a href="#" id="pagePEX" class="ui-btn-active ui-state-persist" onclick="displayPEXForm()">Plasmapheresis</a>

        </li>
        <li><a href="#" id="pageRCX" onclick="displayRCXForm()">Red Cell Exchange</a>

        </li>
        <li><a href="#" id="pageFactor" onclick="displayFactorForm()">Derivatives</a>

        </li>
    </ul>
</div>
<!-- /navbar -->
<div data-role="content" data-theme="c">
    <div class="content-primary">
        <form action="javascript:calculate();" method="action">
            <!-- RCX/PEX metric/US form -->
            <div class="PEXRCX" data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <legend>Measurement:</legend>
                    <input type="radio" name="measurement" id="Metric" checked="checked" value="metric" onclick="metricConvert()" />
                    <label for="Metric">Metric</label>
                    <input type="radio" name="measurement" id="US" value="US" onclick="USConvert()" />
                    <label for="US">US</label>
                </fieldset>
            </div>
            <!-- /RCX/PEX metric/US form -->
            <!-- PEX form -->
            <div class="plasmapheresisForm" id="plasmapheresisForm" data-role="fieldcontain">
                <label for="weight">Weight (kg):</label>
                <input type="text" name="weight" id="weight" value="" />
                <label for="height">Height (m):</label>
                <input type="text" name="height" id="height" value="" />
                <label for="hematocrit">Hematocrit:</label>
                <input type="text" name="hematocrit" id="hematocrit" value="" />
            </div>
    ...

CSS

.hidden {
    display: none;
}
.spacer {
    border-bottom: solid 1px #123455;
    margin: 3px;
}
.dosingResult {
    font-weight:bold;
    color:#ff0000;
}

JavaScript

var replacementVolume;
var hematocrit;
var hctEnd;
var hctRep;
var fcr;
var a;
var b;
var c;
var pRBC;
var loadingDose;
var maintanenceDose;

function displayOutput() {
    $("strong[id='TBV']").filter(':visible').html(TBV);
    $("strong[id='plasmavolume']").filter(':visible').html(PV);
    $("strong[id='redcellvolume']").filter(':visible').html(RCV);
    $("strong[id='rfv']").filter(':visible').html(replacementVolume);
    $("strong[id='pRBCUnits']").filter(':visible').html(pRBC);
}

function displayPEXForm() {
    $('.plasmapheresisForm').show();
    $('.RCXForm').hide();
    $('.PEXRCX').show();
    $('.factorForm').hide();
}

function displayRCXForm() {
    $('.plasmapheresisForm').hide();
    $('.RCXForm').show();
    $('.PEXRCX').show();
    $('.factorForm').hide();
}

function displayFactorForm() {
    $('.plasmapheresisForm').hide();
    $('.RCXForm').hide();
    $('.PEXRCX').hide();
    $('.factorForm').show();
    $("label[for='weight']").html("Weight (kg):");
}

function metricConvert() {
    $("label[for='weight']").html("Weight (kg):");
    $("label[for='height']").html("Height (m):");
}

function USConvert() {
    $("label[for='weight']").html("Weight (lbs):");
    $("label[for='height']").html("Height (inches):");
}

function calculate() {
    if (document.getElementById("male").checked) {
        maleTBV();
    } else if (document.getElementById("female").checked) {
        femaleTBV();
    }
    calculateRCX();
    displayOutput();
}

function femaleTBV() {
    var weight = $("input[id='weight']").filter(':visible').val();
    var height = $("input[id='height']").filter(':visible').val();
    var hematocrit = $("input[id='hematocrit']").filter(':visible').val();
    //Conversion from Lbs to Kg and inches to m
    if ($("label[for='weight']").html() == "Weight (lbs):") {
        height = height * 0.0254;
        weight = weight * 0.453592;
    }
    TBV = ((Math.pow(height, 3) * 356) + 184 + (33.1 * weight)).toFixed(0);
    PV = (TBV * (100 -...