JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

<form name="repaymentcalc" id="myForm" action="">

    <h3>Mortgage Needs</h3>

    <p>Home Value £<input type="number" id="homevalue" value="250000" style="width: 75px"></p>

    <p>Loan Amount £<input type="number" id="loanamount" value="200000" style="width: 75px"></p>

    <p id="ltv">Loan to Value: 80.0%</p>

<section id="type">

  <p id="Mortgage Type">Mortgage Type</p>
  <input type="checkbox" name="type" value="t2" id="t2" checked/>2yr Fixed<br>
  <input type="checkbox" name="type" value="t3" id="t3" checked/>3yr Fixed<br>
  <input type="checkbox" name="type" value="t5" id="t5" checked/>5yr Fixed<br>

</section>

<section id="fee">

  <p id="Fee">Fee</p>
  <input type="checkbox" name="fee" value="fee" id="fee" checked/>Fee<br>
  <input type="checkbox" name="fee" value="nofee" id="nofee" checked/>No Fee<br>

</section>

    Term <input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 75px"> <p id="years" style="display:inline-block;"> 25 years</p>

</form>

<table id="mortgagetable">
    
<thead>

<tr class="producthd"><th class="lenderhd">Lender</th><th class="typehd">Mortgage Type</th><th class="initialratehd">Initial Rate (%)</th><th class="rateshd">Reversion Rate (%)</th><th class="rateshd">Overall APR (%)</th><th class="feehd">Product Fee (£)</th><th class="ltvhd">Maximum LTV (%)</th><th class="repaymenthd">Initial Repayment</th><th class="applylinkhd"></th></tr>

</thead>

<tbody>

<tr class="product"><td class="lender"></td><td class="t2">2yr Fixed</td><td class="initialrate">1.29</td><td class="rates">4.74</td><td class="rates">4.3</td><td class="fee">999</td><td class="ltv">60</td><td class="repayment"></td></td></tr>
<tr class="product"><td class="lender"></td><td class="t2">2yr Fixed</td><td class="initialrate">1.39</td><td class="rates">4.24</td><td class="rates">3.9</td><td class="fee">1495</td><td class="ltv">60</td><td class="repayment"></td><td class="applylink"></td></tr>

</tbody>

</table>

JavaScript

//$("#type :checkbox").click(function () {
//    $("td").parent().hide();
//    $("#type :checkbox:checked").each(function () {
//        $("." + $(this).val()).parent().show();
//   });
//});
//$("#fee :checkbox").click(function () {
//    $("td").parent().hide();
//    $("#fee :checkbox:checked").each(function () {
//        $("." + $(this).val()).parent().show();
//    });
//});


var repayment = function () {

};

document.repaymentcalc.homevalue.onchange = repayment;
document.repaymentcalc.loanamount.onchange = repayment;
document.repaymentcalc.numberpayments.onchange = function () {
    $('#years').html(this.value + ' years');
};
makeSomething();


function makeSomething() {
    $('tbody tr').each(function (idx, row) {
        var $row = $(row);
        var initialRateCell = $row.find('td')[2];
        var repaymentCell = $row.find('td')[7];
        var rate = parseFloat($(initialRateCell).html());
        var repaymentVal = computeRepayment(rate);
        $(repaymentCell).html(repaymentVal.repayment);
    });
}
$("#myForm :input").change(function () {
    makeSomething();
});

function computeRepayment(rate) {
    var x = parseInt(document.repaymentcalc.loanamount.value, 10);
    var y = parseInt(rate * 100, 10) / 120000;
    var z = parseInt(document.repaymentcalc.numberpayments.value, 10) * 12;
    var h = parseInt(document.repaymentcalc.homevalue.value, 10);

    var repayment = y * x * Math.pow((1 + y), z) / (Math.pow((1 + y), z) - 1);

    var loantovalue = x / h * 100;

    $('#ltv').text('Loan to Value: ' + loantovalue.toFixed(2) + '%');

    var year = z / 12;
    return {
        repayment: '£' + repayment.toFixed(2),
        loantovalue: loantovalue,
        year: year
    };
}


//-------------New Code starts from here ----
FilterByMaxLTV();
function FilterByMaxLTV() {
    
    $("#mortgagetable tbody tr").each(function () {
        var doHide = false;
        
        var l = parseFloat($('#loanamount').val());
        var h =...