JSFiddle - React, Tailwind, and code Playground

by Brynner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <input type="number" id="a1" class="item" value="2" data-multiple="5">
      </td>
      <td>
        <span data-input-id-a1="" class="sum" >...</span>
      </td>
    </tr>
    <tr>
      <td>
        <input type="number" id="a2" class="item" value="4" data-multiple="10">
      </td>
      <td>
        <span data-input-id-a2="" class="sum" >...</span>
      </td>
    </tr>
    <tr>
      <td>
        <input type="number" id="a3" class="item" value="6" data-multiple="100">
      </td>
      <td>
        <span data-input-id-a3="" class="sum" >...</span>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total:</td>
      <td class="total">...</td>
    </tr>
  </tfoot>
</table>

JavaScript

$(document).ready(function() {
  calc();
  $('.item').on('change', function() {
  	calc();
  });
});

function calc() {
	var num = 0;
	$('.item').each(function() {
  	// Multiple
    var thisID = $(this).attr('id');
    var thisValue = parseInt($(this).val());
    var itsMultiple = parseInt($(this).attr('data-multiple'));
    var subtotal = thisValue*itsMultiple;
    $('[data-input-id-'+thisID+']').text(subtotal);
    // Sum
    num += subtotal;
  });
  $('.total').text(num);
}