JSFiddle - React, Tailwind, and code Playground

by Alex Rutherford

HTML

<table>
    <tr>
        <th></th>
        <th>Option1</th>
        <th>Option2</th>
        <th>Option3</th>
        <th>Option4</th>
    </tr>
    <tr>
        <td>Money</td>
        <td>
            <input type="number" id="money" />
        </td>
        <td>
            <input type="number" />
        </td>
        <td>
            <input type="number" />
        </td>
        <td>
            <input type="number" />
        </td>
    </tr>
    <tr>
        <td>Upfront</td>
        <td>
            <input type="number" id="upfront" />
        </td>
        <td>
            <input type="number" />
        </td>
        <td>
            <input type="number" />
        </td>
        <td>
            <input type="number" />
        </td>
    </tr>
    <tr>
        <td>Overall Price</td>
        <td id="overallPrice"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Discount</td>
        <td>
            <input type="number" id="discount" />
        </td>
        <td>
            <input type="number" />
        </td>
        <td>
            <input type="number" />
        </td>
        <td>
            <input type="number" />
        </td>
    </tr>
    <tr>
        <td>Dicount Price</td>
        <td id="discountPrice"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

table {
    border: 1px solid;
}
td {
    border: 1px solid;
}

JavaScript

$(document).ready(function () {
    $('input').keyup(function () {
        overallPrice();
        discountPrice();
    });
});

function overallPrice() {
    var cal1, cal2, result;
    cal1 = parseFloat(document.getElementById("money").value);
    cal2 = parseFloat(document.getElementById("upfront").value);
    result = cal1 - cal2;
    document.getElementById("overallPrice").innerHTML = "£" + result;
    return result;
}

function discountPrice() {
    var cal1, cal2, result;
    cal1 = parseFloat(document.getElementById("discount").value);
    cal2 = overallPrice();
    result = cal2 - cal1;
    document.getElementById("discountPrice").innerHTML = "£" + result;
}