JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div>Quantity:
    <input type="text" class="qty">Unit price:
    <input type="text" class="unit">Amount:
    <input type='text' class='amount'>
</div>
<div>Quantity:
    <input type="text" class="qty">Unit price:
    <input type="text" class="unit">Amount:
    <input type='text' class='amount'>
</div>
<div>Quantity:
    <input type="text" class="qty">Unit price:
    <input type="text" class="unit">Amount:
    <input type='text' class='amount'>
</div>
<div>Quantity:
    <input type="text" class="qty">Unit price:
    <input type="text" class="unit">Amount:
    <input type='text' class='amount'>
</div>
<div>Quantity:
    <input type="text" class="qty">Unit price:
    <input type="text" class="unit">Amount:
    <input type='text' class='amount'>
</div>
<div>Quantity:
    <input type="text" class="qty">Unit price:
    <input type="text" class="unit">Amount:
    <input type='text' class='amount'>
</div>Total All:
<input type="text" class="result">

JavaScript

$(".qty").on('input', function () {
    var self = $(this);
    var unitVal = self.next().val();
    self.next().next().val(unitVal * self.val());
   fnAlltotal();
});

$(".unit").on('input', function () {
    var self = $(this);
    var qtyVal = self.prev().val();
    self.next().val(qtyVal * self.val());
  fnAlltotal();
});

function fnAlltotal(){
  var total=0
    $(".amount").each(function(){
         total += parseFloat($(this).val()||0);
    });
    $(".result").val(total);

}