JSFiddle - React, Tailwind, and code Playground

HTML

<div id="calculator">
    <form name="calculate">
        <label for="total">Total Value to Calculate:</label>&nbsp&nbsp&nbsp&nbsp
        <input id="totalFeet" type="text" name="total" size="15" onfocus="clearBoxes(totalFeet, answerbox, answerbox1, answerbox2);">
        <br />
        <br />
        <label for="answerbox">Total Value X &nbsp;$5.95:&nbsp&nbsp&nbsp&nbsp$</label>
        <input id="answerbox" onfocus="this.blur();" type="text" name="answerbox" size="15">
        <br />
        <br />
        <label for="answerbox1">Total Value X $18.95:&nbsp&nbsp&nbsp$</label>
        <input id="answerbox1" onfocus="this.blur();" type="text" name="answerbox1" size="15">
        <br />
        <br />
        <label for="answerbox2">Total Value X $25.95:&nbsp&nbsp&nbsp$</label>
        <input id="answerbox2" onfocus="this.blur();" type="text" name="answerbox2" size="15">
    </form>
</div>

JavaScript

//jQuery keyup to grab input
$(document).ready(function () {
    $('#totalFeet').keyup(function () {
        validiateTheInput();
    });
});

//clear calculated values    


function clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField) {
    answerbox.value = "";
    answerbox1.value = "";
    answerbox2.value = "";
    totalFeetField.value = "";
};

//validate input, then go to callAll (calc the output and display it)


function validiateTheInput() {
    var totalFeetField = document.getElementById('totalFeet');
    var answerbox = document.getElementById('answerbox');
    var answerbox1 = document.getElementById('answerbox1');
    var answerbox2 = document.getElementById('answerbox2');

    // feel like I should be able to catch it here with the length prop.
    if (totalFeetField.value.length == 0) {
        clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField);
    }

    // if input is usable, do the good stuff...
    if (totalFeetField.value != "" && !isNaN(totalFeetField.value)) {
        callAll(); // call the function that calcs the boxes, etc.
    }

    // if input is NaN then alert and clear boxes (clears because a convenient blur event happens)
    else if (isNaN(totalFeetField.value)) {
        alert("The Total Sq. Footage Value must be a number!")
        document.getElementById('totalFeet').value = "";
    }

    // clears the input box (I wish) if you backspace the val. to nothing
    else if (totalFeetField.value == '3') {
        clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField);
    }
    // extra effort trying to catch that empty box :(   
    else if (typeof totalFeetField.value == 'undefined' || totalFeetField.value === null || totalFeetField.value === '') clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField);
}


//group all box calc functions for easy inline call


function callAll() {
    calcFirstBox();
    calcSecondBox();
    calcThirdBox();
}

// calculate box fields based on input box


function...