JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<table>
    <tr class="parent-realtor percent-text">
        <td>
            <h5>Realtor Percent</h5>
        </td>
        <td>
            <input type="text" class="percent-total" /> //output 
            <input type="text" onfocus="this.blur()" class="percent-data" />
        </td>
        <td>
            <input type="text" class="percent-total" /> //output 
            <input type="text" onfocus="this.blur()" class="percent-data" />
        </td>
        <td>
            <input type="text" class="percent-total" /> //output 
            <input type="text" onfocus="this.blur()" class="percent-data" />
        </td>
        <td>
            <input type="text" class="percent-total" /> //output 
            <input type="text" onfocus="this.blur()" class="percent-data" />
        </td>
    </tr>
    <tr class="contract">
        <td>
            <h6>Contract Amount</h6>
        </td>
        <td>
            <input type="text" data-parent="realtor" />
        </td>
        <td>
            <input type="text" data-parent="realtor" />
        </td>
        <td>
            <input type="text" data-parent="realtor" />
        </td>
        <td>
            <input type="text" data-parent="realtor" />
        </td>
    </tr>
    <tr class="percent-text">
        <td>
            <h6>Buyer's Agent</h6>
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //input
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //input
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //input
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input...

CSS

table input {
    width: 50px;
}

table h5, h6 {
    width: 55px;
}
.percent, .percent-total {
    width:20px
}
.percent-data {
    width:45px
}

JavaScript

$('table').on('keyup', '.percent', function(){
    var self = $(this),
        realtor = self.closest('tr').prevAll('.parent-realtor').first(),
        group = realtor.nextUntil('.parent-realtor'),
        contracts = group.filter('.contract').find('input'),
        percents = group.filter('.percent-text');
    
    contracts.each(function(idx){
        // get matching percentages
        var final = +this.value;
        percents.each(function(){
            var extra = +$(this).find('input.percent').eq(idx).val();
            final += extra;
        });
        realtor.find('input.percent-total').eq(idx).val(final);
    });
});