JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<table width="550px">
 <P>Weekly Stylist Report</p>
 <tr>
     <td valign="top">
       <label for="first_name">Retail</label>
       <td><input class="txt" type="text" name="txt" size="5"/></td>
        <td><input class="txt" type="text" name="txt" size="5"/></td>
        <td><input class="txt" type="text" name="txt" size="5"/></td>
        <td><input class="txt" type="text" name="txt" size="5"/></td>
        <td><input class="txt" type="text" name="txt" size="5"/></td>
        <td><input class="txt" type="text" name="txt" size="5"/></td>
        <td><input class="txt" type="text" name="txt" size="5"/></td>
         <td align="center"><input id="sum" name="first_name" size="5"/></td>
     </td> 
 </tr> 
 <tr> 
     <td valign="top"> 
        <label for="last_name">Treatments</label>
        <td><input class="txt2" type="text" name="txt" size="5"/></td>
        <td><input class="txt2" type="text" name="txt" size="5"/></td>
        <td><input class="txt2" type="text" name="txt" size="5"/></td>
        <td><input class="txt2" type="text" name="txt" size="5"/></td>
        <td><input class="txt2" type="text" name="txt" size="5"/></td>
        <td><input class="txt2" type="text" name="txt" size="5"/></td>
        <td><input class="txt2" type="text" name="txt" size="5"/></td>
        <td align="center"><input id="sum_treatments" name="treatments" size="5"/></td> 
     </td>
 </tr> 
 <tr> 
     <td valign="top">
         <label for="email">New Clients</label>
         <td><input class="txt3" type="text" name="txt" size="5"/></td>
         <td><input class="txt3" type="text" name="txt" size="5"/></td>
         <td><input class="txt3" type="text" name="txt" size="5"/></td>
         <td><input class="txt3" type="text" name="txt" size="5"/></td>
         <td><input class="txt3" type="text" name="txt" size="5"/></td>
         <td><input class="txt3" type="text" name="txt" size="5"/></td>
         <td><input class="txt3" type="text" name="txt" size="5"/></td>
         <td...

CSS

.txt {
                background-color: #FEFFB0;
                font-weight: bold;
                text-align: right;
            }

       .txt2 {
                background-color: #FEFFB0;
                font-weight: bold;
                text-align: right;
            }

       .txt3 {
                background-color: #FEFFB0;
                font-weight: bold;
                text-align: right;
            }

JavaScript

$(document).ready(function(){
    var entities = ["retail", "treatments", "newclients", "retention"];
    $.each(entities, function(index, value) {
        alert( index + ": " + value );
        $(".txt" + value).each(function() {
            $(this).keyup(function(){
                calculateSum(value);
            });
        });
    });
    
});
 
function calculateSum(el) { 
    var sum = 0;        
    $(".txt").each(function() {            
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        } 
    });
    
    $("#sum_" + el).val(sum);
}