JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-md-6">
  <label class="col-sm-3 control-label" id="">Total Quantity:</label>
  <div class="col-sm-3 small">
    <input type="text" id="final" class="form-control input-sm" name="TotalQuantity" value="0" disabled />
  </div>
</div>
<hr>
<div class="form-group col-md-6">
  <label class="col-sm-1 control-label">Jan:</label>
  <div class="col-sm-2 small">
    <input type="number" min="0" id="col3" class="form-control input-sm monthly" data-q="q1" name="January" />
  </div>
  <label class="col-sm-1 control-label">Feb:</label>
  <div class="col-sm-2 small">
    <input type="number" min="0" id="col4" class="form-control input-sm monthly" data-q="q1" name="February" />
  </div>
  <label class="col-sm-1 control-label">Mar:</label>
  <div class="col-sm-2 small">
    <input type="number" min="0" id="col5" class="form-control input-sm monthly" data-q="q1" name="March" />
  </div>
  <label class="col-sm-1 control-label">Q1:</label>
  <div class="col-sm-2 small">
    <input type="text" min="0" id="q1" class="form-control input-sm quarter" name="q1" style="background-color: #b3dcf5;" disabled />
  </div>
  <div class="form-group col-md-6">
           <label class="col-sm-1 control-label">April:</label>
           <div class="col-sm-2 small">
           <input type="number" min="0" id="col3" class="form-control input-sm monthly" data-q="q2" name="April"  />
           </div>
           <label class="col-sm-1 control-label">May:</label>
           <div class="col-sm-2 small">
           <input type="number" min="0" id="col4" class="form-control input-sm monthly" data-q="q2" name="May" />
           </div>
           <label class="col-sm-1 control-label">June:</label>
           <div class="col-sm-2 small">
           <input type="number" min="0" id="col5" class="form-control input-sm monthly" data-q="q2" name="June" />
           </div>
           <label class="col-sm-1 control-label">Q2:</label>
           <div class="col-sm-2 small">
           <input...

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.parents('.form-group').find('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);
});