JSFiddle - React, Tailwind, and code Playground

HTML

<table id="dailyexpense" width="946" border="0">
        <tr bgcolor="#666666">
          <td width="120" rowspan="2">Date</td>
          <td width="220" rowspan="2">Country-City</td>
          <td width="100" rowspan="2">Breakfast</td>
          <td width="100" rowspan="2">Lunch</td>
          <td width="100" rowspan="2">Dinner</td>
          <td width="100" rowspan="2">Incidentals</td>
          <td width="80" rowspan="2">Total</td>
          <td width="100" height="24"><a  id="addrow1" href="#add" style="text-decoration:none;"><img src="../../Images/add.png" alt="add" width="14" height="14" border="0" /></a></td>
        </tr>
        <tr bgcolor="#666666">
          <td height="23"><a  id="removerow1" href="#remove" style="text-decoration:none;"><img src="../../Images/remove.png" width="11" height="4" alt="remove" /></a></td>
        </tr>
        <tr  id="cities">
          <td><label for="date"></label>
          <input name="date" type="text" id="date" style="background-color:#CCC;" size="20" /></td>
          <td><label for="cities"></label>
            <select name="cities" id="cities" class="city" style="background-color:#CCC; width:220px;">
           <option>Dummy1</option>
                <option>Dummy1</option>    
          </select></td>
          <td id="tdbreakfast"><input name="brkfastchk" type="checkbox" value="1"    id="cities" />
            <label for="brkfasttxt"></label>
            <input style="background-color:#CCC;" value="1"   name="brkfasttxt" type="text" id="cities" size="5" readonly="readonly" />
          <label for="brkfastchk"></label></td>
          <td id="tdlunch"><input type="checkbox" name="lunchchk" value="2"    id="cities"  />
            <label for="lunchtxt"></label>
            <input style="background-color:#CCC;" value="2"  name="lunchtxt" type="text" id="cities" size="5" readonly="readonly" />
          <label for="lunchchk"></label></td>
          <td id="tddinner"><input type="checkbox" name="dinnerchk" value="3"...

JavaScript

$('tr input[type=checkbox]').change( function(){   
    var total = 0;
    $(this).parents('tr').find('input[type=checkbox]:checked').each( function() {
        total += parseInt($(this).val());        
    });
    
    $(this).parents('tr').find('input[type=text]:last').val(total);
});