JSFiddle - React, Tailwind, and code Playground

by fmdataweb

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="10" id="lastYear" class="border">
    <tr class="d_green">
        <td colspan="6">LAST YEAR</td>
      </tr>
    <tr>
      <td width="36%">Activity</td>
      <td width="9%">Risk</td>
      <td width="13%">Hours Per Week</td>
      <td width="13%">Weeks Per Year</td>
      <td width="13%">Average</td>
      <td width="16%">&nbsp;</td>
    </tr>
    <tr>
      <td align="center"><input type="text" name="activity" id="lastYearSelect1" class="input_b_r" />
      </td>
      <td class="risk"><select name="lastYearRisk1" id="lastYearRisk1">
        <option></option>
        <option>low</option>
        <option>moderate</option>
        <option>high</option>
      </select></td>
      <td><input type="text" name="textfield" id="lastYearHours1" class="input_b_r" /></td>
      <td><input type="text" name="textfield2" id="lastYearWeeks1" class="input_b_r" /></td>
      <td><input type="text" name="textfield3" id="lastYearAverage1" class="input_b_r" /></td>
      <td class="button mt5" ><a href="#" id="newLastYearRowButton">Add another activity</a></td>
    </tr>
    <tr class="l_white">
      <td align="center">&nbsp;</td>
      <td colspan="4" align="right"><table width="100%" border="0" cellpadding="2" cellspacing="0">
        <tr>
          <td width="65%">Total of moderate:</td>
          <td width="35%"><input type="text" name="totalModLastYear" id="textfield4" class="input_b1" /></td>
          <td width="35%">hours/year</td>
        </tr>
        <tr>
          <td>Total of high:</td>
          <td><input type="text" name="totalHighLastYear" id="textfield5" class="input_b1" /></td>
          <td>hours/year</td>
        </tr>
      </table></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="center">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td colspan="2" align="right"><input type="submit" name="button3" id="button3" value="Submit" class="button mt5"...

JavaScript

//Sum Table Cell and Map

     $('#lastYear')
        .on('change', 'select', calc)
        .on('keyup', 'input', calc);
        
    function calc(){
   
        $('#lastYear tr:has(.risk)').each(function(i,v){
            
            var $cel = $(v.cells);
            
            var $risk = $cel.eq(1).find('option:selected').val();
            var $numb = $cel.eq(2).find('input').val();
            var $weeks = $cel.eq(3).find('input').val();
            var $avg = ($numb * $weeks) / 52;
            var $avgRounded = Math.round( $avg * 10 ) / 10;
            
            $cel.eq(4).find('input').val($avgRounded);

        });   
 
        var tot = {};
        
        $('#lastYear tr:has(.risk) option:selected')
                    .map(function(i){
                        var el = $(this).val();
                        var qty = parseFloat($('#lastYear tr:has(.risk)').eq(i).find('td:last input').val());
                        if (!tot.hasOwnProperty(el)) {
                            tot[el] = 0;            
                        }
                        tot[el] += qty
                        return tot;
                    }).get();
       
        // console.log(tot);
         $('#textfield4').val(tot.moderate);
        $('#textfield5').val( tot.high );
        
    }