JSFiddle - React, Tailwind, and code Playground

HTML

<title>Term of loan calculator</title>

<body>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery('#frmCalculate input[type="text"]').on('change', function() {
        var val = this.value;
        val = val.replace(/,/g, "");
        val = number_format(val, 2);
        this.value = val;
    });
});

</script>

<form action="#" method="post" id="frmCalculate" name="frmCalculate">
  <div class="user-prf-box">
    <div class="user-prf-inner-bg">
      <!--Loan amount-->
      <div class="mortage-div-row">
        <label class="loan_label" id="lbl_amount" for="loan_amount">
          Loan amount
        </label>
        <span>
          <small class="small">
            S$
          </small>
          <input type="text" onchange="customCheck()" class="nput-calc amount_box" id="loan_amount" name="loan_amount">
          <div id="amount_value">
          </div>
        </span>

      </div>
      <!--Interest rate per annum-->
      <div class="mortage-div-row">
        <label class="lineheight-normal loan_label" id="lbl_interest" for="interest_rate">
          Interest rate per annum
        </label>
        <span style="line-height:25px;">
          <input type="text" maxlength="12" class="input-calc new-input interest_box" id="interest_rate" name="interest_rate" style="display: inline;">
          <span id="interest_value">
          </span>

          <span class="percentage">
            %
          </span>

        </span>

      </div>
      <!--Term of loan-->
      <div class="mortage-div-row">
        <label class="loan_label" id="lbl_term" for="term_loan">
          Term of loan
        </label>
        <span style="line-height:25px;">
          <input type="text" maxlength="12" class="input-calc new-input term_box" id="term_loan" name="term_loan" style="display: none;" disabled="disabled">
          <b><div id="term_value">
          </div></b>
          <span class="yrcs">
            yr(s)
         ...

JavaScript

//function for formatting number with commas
function number_format(number, decimals, dec_point, thousands_sep) {

    var n = !isFinite( + number) ? 0: +number,
    prec = !isFinite( + decimals) ? 0: Math.abs(decimals),
    sep = (typeof thousands_sep === 'undefined') ? ',': thousands_sep,
    dec = (typeof dec_point === 'undefined') ? '.': dec_point,
    s = '',
    toFixedFix = function(n, prec) {
        var k = Math.pow(10, prec);
        return '' + Math.round(n * k) / k;
    };
    // Fix for IE parseFloat(0.55).toFixed(0) = 0;
    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

function calculate() {

    //Term of loan
    if (frmCalculate.loan_amount.value != "" && frmCalculate.interest_rate.value != "" && frmCalculate.monthly_payment.value != "") {
        var loan_amount = document.getElementById("loan_amount").value;
        loan_amount = loan_amount.replace(/,/g, "");
        var interest_rate = document.getElementById("interest_rate").value;
        interest_rate = interest_rate.replace(/,/g, "");
        var monthly_payment = document.getElementById("monthly_payment").value;
        monthly_payment = monthly_payment.replace(/,/g, "");

        loan_amount = parseFloat(loan_amount.replace(/\s/g, "").replace(",", "."));
        monthly_payment = parseFloat(monthly_payment.replace(/\s/g, "").replace(",", "."));

        rte = interest_rate / 1200;
        pmt = monthly_payment;
        amt = loan_amount;
    console.log("1 " +(Math.log(1 + (rte / (pmt / (amt) - rte)))));
    console.log("/ " +Math.log(1 + rte));
    console.log(pmt / (amt) - rte)
        yrs = (Math.log(1 + (rte / (pmt / (amt) - rte))) / Math.log(1 + rte)) / 12;
        yrs = yrs * 1000;
        yrs =...