JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<input type="text" id="searchName" />
<table  class="table table-striped table-bordered"  id="example" rules="all" border="1">
                    <thead>
                      <tr>                      
                        <td>ID</td>
                        <td>Name</td>
                        <td>Price</td> 
                        <td>Quantity</td>
                        <td>Total</td>                     
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                    <tfoot>
                      <tr>                      
                        <td>Total total</td>
                        <td colspan="3"></td>
                        <td class="totaltotal"></td>                     
                      </tr>
                    </tfoot>
                  </table>

JavaScript

var dta = [{
     label: "tree",
     id: 1,
     value: "Tree",
     price: 20
 }, {
     label: "dog",
     id: 2,
     value: "Dog",
     price: 50
 }];

$('#searchName').autocomplete({
    source: dta,
    select: function(suggestion, ui) {
        event.preventDefault();
        var $tbody = $('#example tbody');
        $tbody.append('<tr><td class="id">' + ui.item.id +
            '</td><td class="name">' + ui.item.value +
            '</td><td class="price">' + ui.item.price +
            '</td><td><input type="number" class="quantity" value="1"/></td><td><input type="text" class="total" readonly value="' + ui.item.price + '" class="readonly"/></td></tr>');
        $(".totaltotal").text(calculateSum());
    }
});

$('body').on('change', '.quantity', function() {
    var tot = $(this).parent().prev().html() * this.value;
    $(this).parent().next().find('.total').val(tot);
     $(".totaltotal").text(calculateSum());
});

function calculateSum() {
    var sum = 0;
    $(".total").each(function() {
        var value = $(this).val();
        // add only if the value is number
        if (!isNaN(value) && value.length != 0) {
         sum += parseFloat(value);
        }
    });
    return sum;
}