JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Grand Total:</h3>
<input type="text" id="final" disabled>
<hr>
<h3>1st Q:</h3>
<input type="text" class="monthly" data-q="q1">
<input type="text" class="monthly" data-q="q1">
<input type="text" class="monthly" data-q="q1">
<br>Sum:
<input id="q1" type="text" class="quarter" disabled>
<h3>2nd Q:</h3>
<input type="text" class="monthly" data-q="q2">
<input type="text" class="monthly" data-q="q2">
<input type="text" class="monthly" data-q="q2">
<br>Sum:
<input id="q2" type="text" class="quarter" disabled>
<h3>3rd Q:</h3>
<input type="text" class="monthly" data-q="q3">
<input type="text" class="monthly" data-q="q3">
<input type="text" class="monthly" data-q="q3">
<br>Sum:
<input id="q3" type="text" class="quarter" disabled>
<h3>4th Q:</h3>
<input type="text" class="monthly" data-q="q4">
<input type="text" class="monthly q-4th" data-q="q4">
<input type="text" class="monthly q-4th" data-q="q4">
<br>Sum:
<input id="q4" type="text" class="quarter" disabled>

CSS

.monthly {
  width: 32%;
}

JavaScript

var monthly = $('.monthly'),
	Qrt = $('.quarter');

monthly.on('change, input', function() {
  var $th = $(this),
    q = $th.attr('data-q'),
    qArray = $th.parent().children('input[data-q="' +q+ '"]'),
    tempSum = 0,
    qSum = 0;

  for (var i = 0, ln = qArray.length; i < ln; i++) {
    tempSum += +$(qArray[i]).val();
  }
  $('#' + q).val(tempSum);
  
  for (var i = 0, ln = Qrt.length; i < ln; i++) {
    qSum += +$(Qrt[i]).val();
  }
  $('#final').val(qSum);
});