JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<table class="table table-bordered" id="planTbl">
    <tbody>
        <tr>
            <th></th>
            <th colspan="2">Jan</th>
            <th colspan="2">Feb</th>
            <th colspan="2">Mar</th>
        </tr>
        <tr>
            <th>Parent Activity</th>
            <th>Hours <span id="Header-hours1"></span></th>
            <th>FTE <span id="Header-fte1"></span></th>
            <th>Hours <span id="Header-hours2"></span></th>
            <th>FTE <span id="Header-fte2"></span></th>
            <th>Hours <span id="Header-hours3"></span></th>
            <th>FTE <span id="Header-fte3"></span></th>
        </tr>
        <tr class="item">
            <td>
                <select class="form-control caasDDL">
                    <option value="0">Select...</option>
                    <option value="1">Reports</option>
                    <option value="2">Analytics</option>
                    <option value="1">Systems</option>
                    <option value="2">Line Management</option>
                    <option value="4">PA123</option>
                    <option value="3">General Admin</option>
                    <option value="4">Time not working</option>
                    <option value="2">New Activity 2</option>
                    <option value="2">ParentActivity2</option>
                    <option value="1">ParentActivity3</option>
                    <option value="4" selected="selected">P1</option>
                    <option value="2">pa2</option>
                    <option value="Select...">asds</option>
                </select>
                <input type="hidden" value="P1">
            </td>
            <td>
                <input type="text" class="form-control hrs-N1" value="2">
            </td>
            <td>
                <input type="text" class="form-control  fte-N1" value="0.01">
            </td>
            <td>
                <input type="text" class="form-control  hrs-N2" value="3">
            </td>
       ...

JavaScript

$(document).ready(function() {
    // First Month HRs
    $(".hrs-N1").each(function() { 
            calculateSum1();
    });
      $(".hrs-N1").each(function() { 
        $(this).on("keyup", function () {
            calculateSum1();
        });
    });
    // First Month FTE
    $(".fte-N1").each(function() { 
            calculateSumFTE1();
    });
      $(".fte-N1").each(function() { 
        $(this).on("keyup", function () {
            calculateSumFTE1();
        });
    });
});
// First Month HRs
function calculateSum1() {
    var sum = 0, dv = 176;
    $(".hrs-N1").each(function() {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });
    $("#Header-hours1").text(sum.toFixed(2) + "/" + dv);
}
// First Month FTE
function calculateSumFTE1() {
    var sum = 0, dv = 1;
    $(".fte-N1").each(function() {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });
    $("#Header-fte1").text(sum.toFixed(2) + "/" + dv);
}