JSFiddle - React, Tailwind, and code Playground

HTML

<tr>
 <td><h2>Field1</h2>
<input type="text" value="0" class="field1" type="number" min="0" max="20" maxlength="2" size="5"></td>
<td><h2>Field 2</h2>
<input type="text" value="101" class="field2" maxlength="4" size="5"></td>
    <td><h2>Field3 - hide span when im empty</h2>
<input type="text" value="0" class="field3" type="number" min="0" max="20" maxlength="2" size="5"></td>
<td><h2>Field 4</h2>
<input type="text" value="101" class="field4" maxlength="4" size="5"></td>
</td>
  </tr>
    <br><br>
        
    Field1: <span class="genaug"><span class="field1"></span>%</span><br />
        Field2: <span class="genpd"><span class="field2">0</span></span><br />
        <span class="field3"></span><br />
Field4: <span class="genpd"><span class="field4">0</span></span>

JavaScript

$("input.field1").on("keyup",function () {
    $("span.field1").html($(this).val());
});
$("input.field2").on("keyup",function () {
    $("span.field2").html($(this).val());
});
$("input.field3").on("keyup",function () {
    var vl = $(this).val();
    if (vl == "") {
        $("span.field3").hide();
    }
    else {
        $("span.field3").show().html(vl);
    }
});
$("input.field4").on("keyup",function () {
    $("span.field4").html($(this).val());
});