JSFiddle - React, Tailwind, and code Playground

HTML

<table>
   <th>Items</th><th>Rate</th><th>Quantity</th>
   <tr><td>Item A</td><td>20</td><td><input type="text" id="txtItemA"/></td></tr>
   <tr><td>Item B</td><td>10</td><td><input type="text" id="txtItemB"/></td></tr>
   <tr><td>Item C</td><td>30</td><td><input type="text" id="txtItemC"/></td></tr>
   <tr><td>Total Price</td><td><input type="text" id="txtPrice"/></td></tr>
</table>

JavaScript

$(document).ready(function(){
    $('table').on('blur','td input[id^=txtItem]',function(){
        var fields = $('td input[id^=txtItem]');
        var total = 0;
        
        $.each(fields,function(index,value){
            var quantity = $(this).val();
            var rate = $(this).parent('td').prev('td').text();
            total += (quantity * rate);            
        });       
        $('#txtPrice').val(total);
    });
});