JSFiddle - React, Tailwind, and code Playground

HTML

<div id="column">
              <form id="deps" name="deps" action="" method="POST"> 

                  <div id="er"> <span class="er" style="display:none;">&nbsp;</span></div>              
                <table class="table">
                    <tr>
                        <td class="field head">&nbsp;</td>
                        <td class="field cv"><label for="met">Metric</label></td>
                        <td class="field cv"><label for="eng">English</label></td>
                    </tr>
                    <tr>
                        <td class="field head"><label for="bd">Bore Dia.</label></td>
                        <td class="field"><input type="text" name="bdmm" id="bdmm" /><label for="bdmm">MM</label></td>
                        <td class="field"><input type="text" name="bdinch" id="bdinch" /> <label for="bdinch">INCH</label></td>
                    </tr>
                    <tr>
                        <td class="field head"><label for="sd">Screen Dia.</label></td>
                        <td class="field"><input type="text" name="sdmm" id="sdmm" /> <label for="sdmm">MM</label></td>
                        <td class="field"><input type="text" name="sdinch" id="sdinch" /> <label for="sdinch">INCH</label></td>
                    </tr>
                    <tr class="spacer">
                        <td class="field head"><label for="lgp">Length - Gravel Pack</label></td>
                        <td class="field"><input type="text" name="lgpm" id="lgpm" /> <label for="lgpm">M</label></td>
                        <td class="field"><input type="text" name="lgpft" id="lgpft" /> <label for="lgpft">FT</label></td>
                    </tr>
                    <tr>
                        <td class="field head"><label for="nbn">No. of Bags needed</label></td>
                        <td class="field"><input type="text" name="nbnm" id="nbnm" /></td>
                        <td class="field"><input type="text" name="nbne" id="nbne" /></td>
            ...

JavaScript

$('#submit').click(function(e) {

        if (formValidate()) {
            e.preventDefault();
            return false;
        }
        else {
            if ($("#bdmm").val().length > 0) {
                calculateMet();
                e.preventDefault();

            }
            else if ($("#bdinch").val().length > 0) {
                calculateEng();
                e.preventDefault();
            }
        }

    });

    $('#lgpm').keydown(function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
            event.preventDefault();
            if (formValidate()) {
                return false;
            }
            else {
                calculateMet();
            }
        }
        //event.stopPropagation();
    });

    $('#lgpft').keydown(function(event) {

        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
            if (formValidate()) {
                event.preventDefault();
                return false;
            }
            else {
                calculateEng();
            }
        }
        //event.stopPropagation();
    });


    $('input[type=text]').focus(function() {
        $('.er').fadeOut(1000);
    });

    $('input[type=text]').keydown(function(event) {
                 var code = event.keyCode || event.which;
              if (code == 9) {
                  return true;
             }
            

        // Allow only backspace and delete
        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 190) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                event.preventDefault();
            }
        }
        return true;
    });

    function formValidate() {
        if ($("#bdmm").val()...