JSFiddle - React, Tailwind, and code Playground

by fmdataweb

HTML

<table width="300px" border="1" id="fruits"">
   <tr>
    <th colspan="3">Fruit Selections</th>
  </tr>
        
  <tr class="header">
    <td width="100">Row</td>
    <td width="100">Fruit</td>
    <td width="100">Qty</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>
        </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>
        </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>
        </tr>
        <tr>
            <td class="title">
                4
            </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="15"/>
            </td>
 ...

CSS

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

JavaScript

$('.qty').change(function(){
    sumApples();
});
$('.fruit').change(function(){
    sumApples();
});

function sumApples(){
    var totalApples = 0;
    $('#fruits').find('select').each(function(){
        if ($(this).val() == 'Apple'){
            var q = $(this).parent('td.fruit').next('td').find('.qty').val();
            totalApples += parseInt(q);
        }
    });
    $('#sumApples').html(totalApples);
}