JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hello" id="CC" style="border-bottom: 2px blue ridge; border-top: 2px blue ridge; border-left: 2px blue ridge; border-right: 2px blue ridge; width: 1000px;" ><TABLE border=0 cellSpacing=0 cellPadding=0 align="center" width="100%" >  <TBODY>      <TR  border=0 cellSpacing=0 cellPadding=0 vAlign=top align=middle width="100%"> <TD align="middle" width ="10%"  > <font color="black" size="2"> <b>A</b></TD>     <td align="left" width ="10%"> <input type="Number"  onfocus="this.style.backgroundColor='#ccc'" onblur="this.style.backgroundColor='#fff'"class="input_CC"  value="21" name="qty" size="10"/> </td>        <TD align="middle" width ="10%"><font color="black"  size="2"><b>B</b></TD> <td align="left" width ="10%"> <input type="text" onfocus="this.style.backgroundColor='#ccc'" onblur="this.style.backgroundColor='#fff'" class="input_CC"   value="0.24"  name="b" size="10"/> </td> <TD align="middle" width ="10%"><font color="black" size="2"> <b>C</b></TD>  <td align="left" width ="10%"> <input type="text"onfocus="this.style.backgroundColor='#ccc'" onblur="this.style.backgroundColor='#fff'" class="input_CC" value="504.0" name="c" size="10"/> </td>  </tr>   </TBODY> </TABLE></div>

JavaScript

$("[name='qty'],[name='b']").change(function () {
   var $tr = $(this).closest("tr"),
       qty = $tr.find("[name='qty']").val(),
       b = $tr.find("[name='b']").val();
    
   var c = parseFloat(qty) * parseFloat(b); 
   $tr.find("[name='c']").val(c);
});