JSFiddle - React, Tailwind, and code Playground

HTML

<style>
  th[data-total]::before { content: attr(data-total); }
</style>

<table id="example">
  <thead>
    <th></th>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
    <th>Total</th>
  </thead>
  <tbody>
    <tr>
      <th>A</th>
      <td><input type="number" data-n="0"></td>
      <td><input type="number" data-n="1"></td>
      <td><input type="number" data-n="2"></td>
      <th data-total="0"></th>
    </tr>
    <tr>
      <th>B</th>
      <td><input type="number" data-n="0"></td>
      <td><input type="number" data-n="1"></td>
      <td><input type="number" data-n="2"></td>
      <th data-total="0"></th>
    </tr>
    <tr>
      <th>C</th>
      <td><input type="number" data-n="0"></td>
      <td><input type="number" data-n="1"></td>
      <td><input type="number" data-n="2"></td>
      <th data-total="0"></th>
    </tr>
  </tbody>
</table>

JavaScript

$(function() {
	// for each row in the table,
	$("#example tbody tr").each(function() {
		// the 12 values for the months
		const values = Array(3).fill(0);
		// a running total that can be updated every time a value changes
		let total = 0;

		// arrow function means "this" is inherited from the current scope (ie. this == the table row)
		const updateTotal = () => {
			$("[data-total]", this).attr("data-total", total.toString());
		};

		// every time something with a data-month changes its value,
		$(this).on("input", "[data-n]", function() {
			// get the new value
			const newvalue = parseInt(this.value || "0", 10);

			// update the running total
			total += newvalue - values[this.dataset.n];

			// put the new value into the array
			values[this.dataset.n] = newvalue;

			// update the total
			updateTotal();
		});
	});
});