JSFiddle - React, Tailwind, and code Playground

by Neels Grobler

HTML

<table id="rounds"></table>

JavaScript

var setRounds = 3;
var setInputs = 4;

$(document).ready(function() {
    
    // Create the table
    var tbl = '';
    for (var r = 0; r < setRounds; r++) {
        tbl += '<tr>';
        for (var i = 0; i < setInputs; i++) {
            tbl += '<td>';
            tbl += '<input id="inp' + r + '.' + i + '" type="text" />';
            tbl += '<input id="sum' + r + '.' + i + '" type="text" disabled="true" />';
            tbl += '</td>';
        }
        tbl += '</tr>';
    }
    $('#rounds').html(tbl);
    
    $('#rounds').change(function() {
        var val = 0;
        for (var r = 0; r < setRounds; r++) {
            var total = 0;
            for (var i = 0; i < setInputs; i++) {
                val = parseFloat(document.getElementById('inp' + r + '.' + i).value);
                if (! isNaN(val) ) {
                    total += val;
                }
                document.getElementById('sum' + r + '.' + i).value = total ? total : '';
            }
        }
    });
    
});