JSFiddle - React, Tailwind, and code Playground

by fmdataweb

HTML

<table width="300px" border="1" id="fruits"">
   <tr>
        <th colspan="4">Fruit Selections</th>
  </tr>
        
  <tr class="header">
    <td width="100">Row</td>
    <td width="100">Fruit</td>
    <td width="100">Qty</td>
    <td width="100">Comments</td>
  </tr>
        
        <tr>
            <td width="40px" class="title">
                1
            </td>
            <td class="fruit">
                <select>
                <option>Apple</option>
                <option>Apple</option>
                <option>Banana</option>
                <option>Mango</option>
              </select>

            </td>
            <td><input class="qty" type="text" name="txt" value="10"/>
            </td>
            <td><input class="comment" type="text" name="comment" value=""/>
            </td>
        </tr>
        <tr>
            <td class="title">
                2
            </td>
            <td class="fruit">
                <select>
                <option>Banana</option>
                <option>Apple</option>
                <option>Banana</option>
                <option>Mango</option>
              </select>
            </td>
             <td><input class="qty" type="text" name="txt" value="5"/>
             </td>
            <td><input class="comment" type="text" name="comment" value=""/>
            </td>
        </tr>
        <tr>
            <td class="title">
                3
            </td>
            <td class="fruit">
                <select>
                <option>Apple</option>
                <option>Apple</option>
                <option>Banana</option>
                <option>Mango</option>
              </select>
            </td>
            <td><input class="qty" type="text" name="txt" value="10"/>
            </td>
            <td><input class="comment" type="text" name="comment" value=""/>
            </td>
        </tr>
        <tr>
            <td class="title">
                4
            </td>
            <td...

CSS

#fruits tr.header {
     background-color:#c0c0c0;
     }
     #fruits th, #fruits td {
    padding: 3px;
    }
    #fruits th {
    background-color:#006699;
    color: #FFF;
    }

JavaScript

$('#fruits')
        .on('change', 'select', calc)
        .on('keyup', 'input', calc);
    
    $(document).ready(calc);
    
    function calc(){
        var total = {};
        $('#fruits tr:has(.fruit)').each(function(){
            
           var $t = $(this), 
               
               // val : Apple | Banana | Mango
               val = $t.find('.fruit select').val(),
               qty = $t.find('input').val();
            
            // the qty
            qty = Number(qty);
            qty = isNaN(qty)?0:qty;
            
            if(!total.hasOwnProperty(val)) total[val] = 0;
            total[val] += qty;
        });
        
        // you would be updating the actual html here.    
        for(val in total){
            if(total.hasOwnProperty(val)){
                $('#sum' + val).html(total[val]);
            }                
        }
    }