JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<div>
            <input type="checkbox" id="chkSelfContribute" checked="checked" />Self Contribution
            <h4>Description</h4>
            <input type="text" id="txtDesc" />
            <h4>Amount</h4>
            <input type="text" id="txtAmount" />
            <button id="btnCalculate">Calculate</button>
            <label class="lblContribution"></label>
            <br />
            <table id="tblSharing">
                <thead>
                    <th>Person</th>
                    <th>In Sharing?</th>
                    <th>Owes you</th>
                    <th>Has Also Paid?</th>
                    <th></th>
                </thead>
                <tbody>
                    <tr>
                        <td>A</td>
                        <td><input type="checkbox" class="chkHasShared" id="chk1" /></td>
                        <td class="owe" data-id="1"></td>
                        <td><input type="checkbox" class="chkHasPaid" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>B</td>
                        <td><input type="checkbox" class="chkHasShared" id="chk2" /></td>
                        <td class="owe" data-id="2"></td>
                        <td><input type="checkbox" class="chkHasPaid" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>C</td>
                        <td><input type="checkbox" class="chkHasShared" id="chk2" /></td>
                        <td class="owe" data-id="3"></td>
                        <td><input type="checkbox" class="chkHasPaid" /></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>

JavaScript

$(document).ready(function () {
                $('#btnCalculate').click(function () {
                    var _checked = $('#tblSharing input[type=checkbox]:checked');
                    var _amount = $('#txtAmount').val();

                    var _isSelfContribution = $('#chkSelfContribute').prop('checked');

                    var _totalShared = _checked.length;
                    if (_isSelfContribution)
                        _totalShared++;

                    var _amountPerHead = (_amount / _totalShared);

                    $('#tblSharing tbody tr').each(function () {
                        if ($('input[type=checkbox].chkHasShared', this).prop('checked')) {
                            $('.owe', this).text(_amountPerHead);
                        }
                    });
                });

                function Person(id, amountPaid, amountOwes, amountToPay) {
                    this.id = id;
                    this.amountPaid = amountPaid;
                    this.amountOwes = amountOwes;
                    this.amountToPay = amountToPay;
                };

                function Settlement(person1ID, person2ID, amount){
                    this.person1ID = person1ID;
                    this.person2ID = person2ID;
                    this.amount = amount;
                };

                var _personA = new Person('A', 4, 0, 0);
                var _personB = new Person('B', 0, 0, 0);
                var _personC = new Person('C', 0, 0, 0);
                var _personD = new Person('D', 100, 0, 0);

                var _persons = [_personA, _personB, _personC, _personD];
                var _final = [];

                var _totalAmount = 0;
                var _sharePerHead = 0;

                //calculate total amount
                $.each(_persons, function () {
                    _totalAmount += this.amountPaid;
                });

                //calculate share per head
                _sharePerHead = _totalAmount /...