I am creating a table that will automate the calculation of Mileage Expenses based on set bandrates:

the table currently calculates the reimbursement total for each row and after each row, the rate will change if the total kilometers is exceeded for a bandrate.

function sumKilo()
{
  var sum = 0;
  $('#q8 table tr').each(function() {
    var kilo = $(this).find('[data-title="Kilometers"] input[type="text"]');
    if(parseInt(kilo.val()) > 0)
    {
      sum = sum + parseInt(kilo.val().replace(',',''));
      kilo.data("ksum",sum);
    }
  });

}
 

$(document).ready(function () {
  $(document).on('change','#q8 tr td[data-title="Kilometers"] input[type="text"]',function() {
     sumKilo();
     var band = 0;
    var ksum = parseInt($(this).data("ksum"));
     if(ksum <=1500)
     {
       band = $('.band1 input').val();
     }

    else if(ksum <=5500)
    {
       band = $('.band2 input').val();
     }

    else if(ksum <=25000)
    {
      band = $('.band3 input').val();
    }

    else
   {
      band = $('.band4 input').val();
    }

    $(this).parents('tr').find('[data-title="Reimbursement"] input[type="text"]').val(parseFloat($(this).val().replace(',','')) * band);
    
  });
});

here is the form:

The rate has changed mid-form above as 1500 total annual kilomoters has been exceeded.

MY PROBLEM:

My issue is I need to allow for the rate to change while calculating the reimbursement.

Example:

My total annual kilometers = 1,480 km

Number inputted into Kilometers field = 100 km

Reimbursement should be : (20 km * band rate 1) + (80 km * band rate 2)

As opposed to 100 km * band rate 1, and then the band rate changes.

Anyone have any ideas how this could be achieved within Javascript?