JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<form>
<input type="text" name="no301" class="form-control" id="no301" placeholder="">
<input type="text" name="no301" class="form-control" id="no302" placeholder="">
<input type="text" name="no301" class="form-control" id="no303" placeholder="">
<input type="text" name="no301" class="form-control" id="no304" placeholder="">
<input type="text" name="no301" class="form-control" id="no305" placeholder="">
<input type="text" name="no301" class="form-control" id="no306" placeholder="">
<input type="text" name="no307" class="form-control" id="thesum" placeholder="307">
</form>

CSS

input{display:block;margin-top:20px;}

JavaScript

$("form .form-control").not("#thesum").on("input", function() {
  var getSum = 0;
  $("form .form-control").not("#thesum").filter(function() { if($.isNumeric($(this).val())) return $(this).val();  }).each(function() {
  getSum+=parseFloat($(this).val());
  });
  $("#thesum").val(getSum);
});