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>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 l = parseFloat($('#loanamount').val());
        var h = parseFloat($('#homevalue').val());
        var loneToValue =...