JSFiddle - React, Tailwind, and code Playground

by hollandben

HTML

<div class="this-is-the-main-container">

    <!-- each row is the same as this -->
    <div class="stats-row">
        <input type="text" class="total home-total">
        <input type="text" class="percentage home-percentage">
        
        <input type="text" class="total away-total">
        <input type="text" class="percentage away-percentage">
    </div>
    
</div>

CSS

.percentage {
    width: 40px;
}

JavaScript

$(function() {
    $('.stats-row').on('change', '.total', function(e) {
        var $row            = $(e.delegateTarget),
            $homePercentage = $row.find('.home-percentage'),
            $awayPercentage = $row.find('.away-percentage'),
            homeTotal       = $row.find('.home-total').val(),
            awayTotal       = $row.find('.away-total').val();
        
        if(homeTotal == '' || awayTotal == '' || homeTotal < 0 || awayTotal < 0) {
            $homePercentage.val('');
            $awayPercentage.val('');
            return false;
        }
        
        var total    = parseInt(homeTotal, 10) + parseInt(awayTotal, 10),
            homePerc = Math.round((homeTotal/total) * 100),
            awayPerc = Math.round((awayTotal/total) * 100);
        
        // If the values are both 0
        if(homeTotal == '0' && awayTotal == '0') {
            homePerc = 50;
            awayPerc = 50;
        }
        
        // If the percentage total isn't 100, then add/minus one to make it
        if(homePerc + awayPerc === 99)  homePerc++;
        if(homePerc + awayPerc === 101) homePerc--;
        
        $homePercentage.val(homePerc);
        $awayPercentage.val(awayPerc);
    });
});