JSFiddle - React, Tailwind, and code Playground

by Jordan Schnur

HTML

<div class="row">
    <div>
        <input class="form-control" id="num-of-prods-1" type="text" placeholder="Number of units">
    </div>
    <div>
        <input class="form-control" id="prod-unit-price-1" type="text" placeholder="Unit price">
    </div>
    <div>
        <input class="form-control" id="discount-rate-1" type="text" placeholder="Discount rate %">
    </div>
    <div>
        <input class="form-control" id="order-amount-1" type="text" placeholder="Total">
    </div>
</div>
<div class="row">
    <div>
        <input class="form-control" id="num-of-prods-2" type="text" placeholder="Number of units">
    </div>
    <div>
        <input class="form-control" id="prod-unit-price-2" type="text" placeholder="Unit price">
    </div>
    <div>
        <input class="form-control" id="discount-rate-2" type="text" placeholder="Discount rate %">
    </div>
    <div>
        <input class="form-control" id="order-amount-2" type="text" placeholder="Total">
    </div>
</div>

CSS

.row div {
    display:inline-block;
}

JavaScript

$(".form-control").keyup(function (e) {
     var num = parseFloat(String.fromCharCode(e.which));
     if (!isNaN(num)) {
         if (num == 0) {
             $(this).val("You entered 0!");
         }
     }
 });