JSFiddle - React, Tailwind, and code Playground

HTML

<table>
                        <caption>Checkout Time!</caption>
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Price</th>
                            <th>Quantity</th>                           
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <td colspan="4" align="right"><input type="button" value="Checkout!"/></td>
                        </tr>
                    </tfoot>            
                    <tbody>
                        <tr>
                            <td class="description">Folger's Gourmet Instant Coffee 24 count box.</td>                          
                            <td><input type="text" id="price" readonly value="12.50" class="readonly"/></td>
                            <td><input type="text" id="quantity" value="1"/></td>                           
                            <td><input type="text" id="total" readonly value="12.50" class="readonly"/></td>
                        </tr>
                    </tbody>
                </table>

JavaScript

$('#quantity').on('keyup',function(){
    var tot = $('#price').val() * this.value;
    $('#total').val(tot);
});