JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post" name="groups">
    <label>Category1</label>
    <select name="product" class="select-products">
        <option value="1,20,10,Category1">Product1 [20]</option>
        <option value="2,10,5,Category1">Product2 [10]</option>
        <option value="3,25,15,Category1">Product3 [25]</option>
    </select>
    <br/><br/>
    <label>Category2</label>
    <select name="product" class="select-products">
        <option value="4,20,10,Category2">Product4 [20]</option>
        <option value="5,10,5,Category2">Product5 [10]</option>
        <option value="6,25,15,Category2">Product6 [25]</option>
    </select>
</form>

<h4>Products list</h4>

<form action="" method="post" name="order">
    <table id="order">
        <tr>
            <th>Product name</th>
            <th>Product price</th>
            <th>Purchase price</th>
            <th>Quantity</th>
            <th>Actions</th>
        </tr>
    </table>
    <p class='fullPrice'></p>
    <input type="submit" name="add-order" value="Submit" id="add-order">
</form>

JavaScript

jQuery("select.select-products").on('change', function () {
                val = jQuery(this).val();
                split = val.split(',');
                id = split[0];
                price = split[1];
                purchasePrice = split[2];
                category = split[3];
                txt = jQuery("option:selected", this).text();
                txt = txt.replace(/(\[.*?\])/g, '');
                i = jQuery('#order tr').size() + 1;
                jQuery("#order").append("<tr><td>" + category + " - " + txt + "<input type='hidden' name='selected-product' value='" + id + "'></td><td class='priceClass'>" + price + "</td><td>" + purchasePrice + "</td><td><input type='number' name='selected-product-quantity' class='selected-product-quantity' min='1' value='1'></td><td><button type='button' class='remove-product'>Remove</button></td></tr>");
                i++;


                var sum = 0;
                jQuery('.priceClass').each(function () {
                    sum += Number(jQuery(this).text());
                    console.log(sum);
                });
                jQuery(".fullPrice").html("<b>Full price: </b>" + sum);

            });

            jQuery("#order").on('click', '.remove-product', function () {
                console.log(i);
                if (i > 1) {
                    jQuery(this).parents('tr').remove();
                    i--;
                }
            });