JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<table  border="1" style="border-collapse:collapse;background-color:#fafafa" id="activityTable">
    <tr>
        <th>Sunday</th>
        <th>Monday</th> 
        <th>Tuesday</th>
        <th>Wednesday</th>         
        <th>Thursday</th>
        <th>Friday</th> 
        <th>Saturday</th>
        <th>Total</th>
    </tr>
    
    <tr>
       
        <td><input class="sun week1 days" type="text" name="sun_1"/></td>
        <td><input class="mon week1 days" type="text" name="mon_1"/></td>
        <td><input class="tue week1 days" type="text" name="tue_1"/></td>
        <td><input class="wed week1 days" type="text" name="wed_1"/></td>
        <td><input class="thu week1 days" type="text" name="thu_1"/></td>
        <td><input class="fri week1 days" type="text" name="fri_1"/></td>
        <td><input class="sat week1 days" type="text" name="sat_1"/></td>
        <td><span id="sumWeek1">0</span></td>
    </tr>
    <tr>
        
        <td><input class="sun week2 days" type="text" name="sun_2" value="2"/></td>
        <td><input class="mon week2 days" type="text" name="mon_2"/></td>
        <td><input class="tue week2 days" type="text" name="tue_1"value="2"/></td>
        <td><input class="wed week2 days" type="text" name="wed_1"/></td>
        <td><input class="thu week2 days" type="text" name="thu_1"/></td>
        <td><input class="fri week2 days" type="text" name="fri_1"/></td>
        <td><input class="sat week2 days" type="text" name="sat_1"/></td>
        <td><span id="sumWeek2">0</span></td>
    </tr>
    <tr>
        
        <td><input class="sun week3 currency" type="text" name="sun_3"/></td>
        <td><input class="mon week3 currency" type="text" name="mon_3"/></td>
        <td><input class="tue week3 currency" type="text" name="tue_1"/></td>
        <td><input class="wed week3 currency" type="text" name="wed_1"/></td>
        <td><input class="thu week3 currency" type="text" name="thu_1"/></td>
        <td><input class="fri week3 currency"...

CSS

body {
                font-family: sans-serif;
            }
            #summation, #overtime, #regular {
                font-size: 15px;
                font-weight: bold;
                color:#000;
            }
            .sun, .mon,.tue,.wed, .thu, .fri, .sat{
                background-color: #f0f0f0;
                font-weight: bold;
                text-align: right;
    width:70px;
            }

JavaScript

$(document).ready(function() {

    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    calculateSum();


    function addRowToTable() {
        $('#activityTable > tbody > tr').eq(i - 1).after(html);
    }

    $(".sun,.mon,.tue,.wed,.thu,.fri,.sat").keyup(function() {
        totB4=0;
        $("."+$(this).attr("class").split(" ")[0]).not($(this)).each(function(){
            if (!isNaN($(this).val()) && $(this).val().length != 0) {
            totB4 += parseFloat($(this).val());
            }
        });
        thisVal = 0;
        if (!isNaN($(this).val()) && $(this).val().length != 0) {
            thisVal = parseFloat($(this).val());
            if (thisVal+totB4>24){
                $(this).val(24-totB4);
            }
            calculateSum();
        }
            
    });

});



function calculateSum() {

    var sum = 0;
    var sumSun = 0;
    var sumMon = 0;
    var sumTue = 0;
    var sumWed = 0;
    var sumThu = 0;
    var sumFri = 0;
    var sumSat = 0;
    var sumReg = 40;
    var sumOT = 0;
    var sumW1 = 0;
    var sumW2 = 0;
    var sumW3 = 0;
    var sumW4 = 0;
    var sumW5 = 0;
    var sumW5 = 0;

    //iterate through each textboxes and add the values
    $(".sun").each(function() {

        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
            sumSun += parseFloat(this.value);

            //calculate OT hours                                    
            if (sum > 40) {
                sumOT = (sum - sumReg)
            }

        }


    });
    $(".mon").each(function() {

        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
            sumMon += parseFloat(this.value);

            //calculate OT hours                                   
            if (sum > 40) {
                sumOT = (sum - sumReg)
        ...