JSFiddle - React, Tailwind, and code Playground

by newblt123

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-3">Min float:</div>
        <div class="col-md-3"><input placeholder="Item #1 min float" id="item1minfloat" value="0" /></div>
        <div class="col-md-3">Max float:</div>
        <div class="col-md-3"><input placeholder="Item #1 max float" id="item1maxfloat" value="0" /></div>
    </div>
    <div class="row">
        <div class="col-md-3">Min float:</div>
        <div class="col-md-3"><input placeholder="Item #2 min float" id="item2minfloat" value="0" /></div>
        <div class="col-md-3">Max float:</div>
        <div class="col-md-3"><input placeholder="Item #2 max float" id="item2maxfloat" value="0" /></div>
    </div>
    <div class="row">
        <div class="col-md-3">Min float:</div>
        <div class="col-md-3"><input placeholder="Item #3 min float" id="item3minfloat" value="0" /></div>
        <div class="col-md-3">Max float:</div>
        <div class="col-md-3"><input placeholder="Item #3 max float" id="item3maxfloat" value="0" /></div>
    </div>
    <div class="row">
        <div class="col-md-3">Min float:</div>
        <div class="col-md-3"><input placeholder="Item #4 min float" id="item4minfloat" value="0" /></div>
        <div class="col-md-3">Max float:</div>
        <div class="col-md-3"><input placeholder="Item #4 max float" id="item4maxfloat" value="0" /></div>
    </div>
    <div class="row">
        <div class="col-md-3">Min float:</div>
        <div class="col-md-3"><input placeholder="Item #5 min float" id="item5minfloat" value="0" /></div>
        <div class="col-md-3">Max float:</div>
        <div class="col-md-3"><input placeholder="Item #5 max float" id="item5maxfloat" value="0" /></div>
    </div>
    <div class="row">
        <div class="col-md-6"># Factory New</div>
        <div class="col-md-6"><input placeholder="Factory New" id="fn" value="0"/></div>
   ...

JavaScript

$(function(){
	$("#item1minfloat").focus();
});

$(function(){
    $("#calculate").click(function() {
        
        $("table tr.dataRow").remove();
        var itemsArray = [];
        
        var fn = $("#fn").val();
        var mw = $("#mw").val();
        var ft = $("#ft").val();
        var ww = $("#ww").val();
        var bs = $("#bs").val();

        if (fn === "") return;
        if (mw === "") return;
        if (ft === "") return;
        if (ww === "") return;
        if (bs === "") return;

        fn = parseInt(fn);
        mw = parseInt(mw);
        ft = parseInt(ft);
        ww = parseInt(ww);
        bs = parseInt(bs);

        if (fn + mw + ft + ww + bs !== 10) {
        	alert('fn + mw + ft + ww + bs !== 10');
            return;
        }

        var avg = ((fn * 0.035) + (mw * 0.11) +  (ft * 0.265) + (ww * 0.415) + (bs * 0.725)) / 10;
        var seventy_percent = ((fn * 0.049) + (mw * 0.126) +  (ft * 0.311) + (ww * 0.429) + (bs * 0.835)) / 10;
        var eighty_percent = ((fn * 0.056) + (mw * 0.134) +  (ft * 0.334) + (ww * 0.436) + (bs * 0.89)) / 10;
        var worst = ((fn * 0.07) + (mw * 0.15) +  (ft * 0.38) + (ww * 0.45) + (bs * 1)) / 10;
        
        if (parseFloat($("#item1maxfloat").val())) {
            addItemToArray(itemsArray, parseFloat($("#item1minfloat").val()), parseFloat($("#item1maxfloat").val()), avg, seventy_percent, eighty_percent, worst);
        }
        
        if (parseFloat($("#item2maxfloat").val())) {
            addItemToArray(itemsArray, parseFloat($("#item2minfloat").val()), parseFloat($("#item2maxfloat").val()), avg, seventy_percent, eighty_percent, worst);
        }
        
        if (parseFloat($("#item3maxfloat").val())) {
            addItemToArray(itemsArray, parseFloat($("#item3minfloat").val()), parseFloat($("#item3maxfloat").val()), avg, seventy_percent, eighty_percent, worst);
        }
        
        if (parseFloat($("#item4maxfloat").val())) {
            addItemToArray(itemsArray,...