Summing values from jquery repeater inputs based on values from other inputs in same row

Question

I have a page that has 4 main inputs to accumulate the totals of certain fields on a jquery repeater. The repeater is meant to assign employees to a project and assign what their fee would be. A project can have anywhere from 1 employee assigned, or a dozen. Each employee is assigned a Role (Role #1 through #4) and what their fee in percentage would be. Also, each role can have multiple employees assigned to it. So before the form is submitted, the user needs to be sure that all fee values for employees assigned to Role 1 MUST add up to 100, and that is true for all roles. Also, some roles may not be assigned at all, so it's ok they remain zero.

The below doesn't even work, I was trying to get at least the 'Role 1 %' to successfully accumulate the 'userFee' fields before I even tried breaking it down into specific roles. Stack masters, any ideas?

<!-- fields for accumulating the fee percentages of each role -->
<div Class="row">
    <div Class="input-group-text">Role 1 %</div><input id="TotalR1_Percentage" disabled>
    <div Class="input-group-text">Role 2 %</div><input id="TotalR2_Percentage" disabled>
    <div Class="input-group-text">Role 3 %</div><input id="TotalR3_Percentage" disabled>
    <div Class="input-group-text">Role 4 %</div><input id="TotalR4_Percentage" disabled>
</div>

<!-- Data repeater to assign employees, their role, and their fee %-->
<div data-repeater-list="team">
    <div data-repeater-item Class="row empFees" name="empFees">
        <Label for="team_members" class="form-label">Team Member:</Label>
        <select id="team_member" name="team_member" Class="form-select" required>
            <option value="">Select Employee ...</option>
            @ForEach (item In eList) {
            <option value="@item.Value">@item.Text</option>
            }
        </select>

        <Label Class="form-label">Project Role:</Label>
        <select id="proj_role" name="proj_role" Class="form-select" required>
            <option value="">Select Role ...</option>
            @ForEach (item In rList) {
            <option value="@item.Value">@item.Text</option>
            }
        </select>

        <Label Class="form-label">Fee:</Label>
        <div Class="input-group">
            <div Class="input-group-text">%</div><input id="userFee" class="feeAllocation" required>
        </div>
        <Button data-repeater-delete type="button">Remove Assignment</Button>
    </div>
</div>
<Button data-repeater-create type="button">Remove Assignment</Button>

<script>
    $(document).ready(function () {
        "use strict";

        var totalR1 = $('#TotalR1_Percentage');
        var totalR2 = $('#TotalR2_Percentage');
        var totalR3 = $('#TotalR3_Percentage');
        var totalR4 = $('#TotalR4_Percentage');

        var repeater = $("#empFees");
        //Iterate through each repeater Textbox and add change event handler
        repeater.on("change", ".input", function () {
            var total = 0;
            repeater.find(".input.feeAllocation").each(function () {
                if (!isNaN(this.value) && this.value.length != 0) {
                    total += parseFloat(this.value);
                }
                totalR1.val(total);
            });
        });

    });
</script>