JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div>
    <input class="form-control" id="numofprods1" type="text" placeholder="Number of units">
  </div>
  <div>
    <input class="form-control" id="unitprice" type="text" placeholder="Unit price">
  </div>
  <div>
    <input class="form-control" id="discount1" type="text" placeholder="Discount rate %">
  </div>
  <div>
    <input class="form-control" id="orderamount1" 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

$('#numofprods1').blur(function(e) {
        var txtVal = parseFloat($(this).val());
        $('#orderamount1').val(txtVal);
    });
$('#unitprice').blur(function(e) {
        var txtVal = parseFloat($(this).val()) * parseInt($('#numofprods1').val());
        $('#orderamount1').val(txtVal);
    });

$('#discount1').blur(function(e) {
        var txtVal = (parseFloat($(this).val()) * parseFloat($('#unitprice').val()) * parseFloat($('#numofprods1').val())) / 100;
        $('#orderamount1').val(txtVal);
    });