Results Doesn't Update After Changing Dropdown Javascript

Question

If you run the snippet, try to add a province and value to the device price. (This works as expected) But after doing it, and you change the province again, it will not update. How can I achieve this?

Basically, what I want to do is whenever you change something, it should update the 6month and 12month boxes automatically.

var province = [ '5.00','12.00','12.00','15.00','15.00','5.00','15.00','5.00','13.00','15.00','14.975','11.00','5.00'];

$('#paybright').change(function(paycalc){
    var o = parseInt($(this).val()) < 14 ? $(this).val()-1 : 2;
    $('#paytax').val(province[o]).addClass('hidden');
});

$('#paytax, #paybprice').on('input', function paycalc(){
  const paytax = Number(document.getElementById("paytax").value);
  const paybprice = Number(document.getElementById("paybprice").value);
  const sixmos = (document.getElementById("sixmos"));
  const twemos = (document.getElementById("twemos"));

  if (paybprice < 300) {
    $('#sixmos').val("N/A");
    $('#twemos').val("N/A");
  }else{
    $('#sixmos').val("$" + ((paybprice * (1 + paytax / 100) + (6 * 3.95)) / 6).toFixed(2) + " / month");
    $('#twemos').val("$" + ((paybprice * (1 + paytax / 100) + (12 * 3.95)) / 12).toFixed(2) + " / month");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="content-input" name="paybright" id="paybright" style="width:350px;" onchange="changecat(this.value);">
  <option value="" disabled selected>Select Province</option>
  <option value="1">Alberta</option>
  <option value="2">British Columbia</option>
  <option value="3">Manitoba</option>
  <option value="4">New Brunswick</option>
  <option value="5">Newfoundland and Labrador</option>
  <option value="6">Northwest Territories</option>
  <option value="7">Nova Scotia</option>
  <option value="8">Nunavut</option>
  <option value="9">Ontario</option>
  <option value="10">Prince Edward Island</option>
  <option value="11">Quebec</option>
  <option value="12">Saskatchewan</option>
  <option value="13">Yukon</option>
</select>
<div class="content-label inputIconBg">
  <input class="content-input" type="text" name="paytax" id="paytax" placeholder="Tax Percentage" style="width:350px;" onchange="populateTax(this.value);" readonly/>
  <i class="fas fa-percent" id="paytax1" data-toggle="tooltip" title="Tax" data-placement="left"></i>
</div>

<div class="content-label inputIconBg" id="payprice">
  <input class="content-input" type="number" id="paybprice" placeholder="Device Price" style="width:350px;" />
  <i class="fas fa-dollar-sign" id="paydollar" data-toggle="tooltip" title="Cost" data-placement="left"></i>
</div>

<div class="col-sm-12 col-md ">
  <label for="sixmos" class="moneyLabel">6 Months</label>
  <input type="text" id="sixmos" class="form-control" name="sixmos" value="0" style="width:350px;" readonly />
</div>

<div class="col-sm-12 col-md ">
  <label for="twemos" class="moneyLabel">12 Months</label>
  <input type="text" id="twemos" class="form-control" name="twemos" value="0" style="width:350px;" readonly />
</div>

Answer 1

Just trigger input $('#paytax, #paybprice').trigger("input") after select change:

$('#paybright').change(function(paycalc) {
  var o = parseInt($(this).val()) < 14 ? $(this).val() - 1 : 2;
  $('#paytax').val(province[o]).addClass('hidden');
$('#paytax, #paybprice').trigger("input") 
});

var province = ['5.00', '12.00', '12.00', '15.00', '15.00', '5.00', '15.00', '5.00', '13.00', '15.00', '14.975', '11.00', '5.00'];

$('#paybright').change(function(paycalc) {
  var o = parseInt($(this).val()) < 14 ? $(this).val() - 1 : 2;
  $('#paytax').val(province[o]).addClass('hidden');
$('#paytax, #paybprice').trigger("input") 
});

$('#paytax, #paybprice').on('input', function paycalc() {
  const paytax = Number(document.getElementById("paytax").value);
  const paybprice = Number(document.getElementById("paybprice").value);
  const sixmos = (document.getElementById("sixmos"));
  const twemos = (document.getElementById("twemos"));

  if (paybprice < 300) {
    $('#sixmos').val("N/A");
    $('#twemos').val("N/A");
  } else {
    $('#sixmos').val("$" + ((paybprice * (1 + paytax / 100) + (6 * 3.95)) / 6).toFixed(2) + " / month");
    $('#twemos').val("$" + ((paybprice * (1 + paytax / 100) + (12 * 3.95)) / 12).toFixed(2) + " / month");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="content-input" name="paybright" id="paybright" style="width:350px;" >
  <option value="" disabled selected>Select Province</option>
  <option value="1">Alberta</option>
  <option value="2">British Columbia</option>
  <option value="3">Manitoba</option>
  <option value="4">New Brunswick</option>
  <option value="5">Newfoundland and Labrador</option>
  <option value="6">Northwest Territories</option>
  <option value="7">Nova Scotia</option>
  <option value="8">Nunavut</option>
  <option value="9">Ontario</option>
  <option value="10">Prince Edward Island</option>
  <option value="11">Quebec</option>
  <option value="12">Saskatchewan</option>
  <option value="13">Yukon</option>
</select>
<div class="content-label inputIconBg">
  <input class="content-input" type="text" name="paytax" id="paytax" placeholder="Tax Percentage" style="width:350px;" onchange="populateTax(this.value);" readonly/>
  <i class="fas fa-percent" id="paytax1" data-toggle="tooltip" title="Tax" data-placement="left"></i>
</div>

<div class="content-label inputIconBg" id="payprice">
  <input class="content-input" type="number" id="paybprice" placeholder="Device Price" style="width:350px;" />
  <i class="fas fa-dollar-sign" id="paydollar" data-toggle="tooltip" title="Cost" data-placement="left"></i>
</div>

<div class="col-sm-12 col-md ">
  <label for="sixmos" class="moneyLabel">6 Months</label>
  <input type="text" id="sixmos" class="form-control" name="sixmos" value="0" style="width:350px;" readonly />
</div>

<div class="col-sm-12 col-md ">
  <label for="twemos" class="moneyLabel">12 Months</label>
  <input type="text" id="twemos" class="form-control" name="twemos" value="0" style="width:350px;" readonly />
</div>