JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<input type="text" class="qty1" value="2" />

<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<p>
  total
</p>
<input type="text" class="total" value="" />

CSS

input {
  display: block;
}

input.total {
  margin-top: 30px;
}

JavaScript

$(document).on("keyup", ".qty1", function() {
  var sum = 0;
  $(".qty1").each(function() {
    sum += +$(this).val();
  });
  $(".total").val(sum);
});