JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>


<input type="text" class="input product1">
<input type="text" class="input discount1">
<input type="text" disabled="disabled" id="total1"><br />
<input type="text" class="input product2">
<input type="text" class="input discount2">
<input type="text" disabled="disabled" id="total2"><br />
Total: <input type="text" disabled="disabled" id="total">



</body>
</html>

JavaScript

$(document).ready(function(){
    $(".input").keyup(function(){
          var product1 = $(".product1").val();
          var product2 = $(".product2").val();
          var discount1 = $(".discount1").val();
          var discount2 = $(".discount2").val();
          var total1 = product1 * (100 - discount1)/100;
          var total2 = product2 * (100 - discount2)/100;
          $("#total1").val(total1);
          $("#total2").val(total2);
          $("#total").val((total1 + total2)toFixed(2);
   });
});