how to sort select option and combine it if the option type is same

Question

I need some help with the code here, so whenever i pick a same option and click submit order button it will display the qty>name>price of the option i choose based on the row of the select boxes.

I want to change the result so it will be when i click a same option type, it should combine the option and sum the qty in a same row at the table. Here is the image in case anyone a bit confused with my question

As you can see, i pick "pancake" twice with a different qty here and the result are the first row and second row of table which display it separately. For the output it should be like this "Qty combined (2+3=5), Pancake, Price sum of the combined qty (17000+25500=42500)".

I have tried searching for a similar question like this, but the method only works when it have same name inside a json object..

Here is the full code:

var data = {Food:[{id:1,name:"Fried Rice",price:1e4},{id:2,name:"Fried Noodle",price:9e3},{id:3,name:"Pancake",price:8500},{id:4,name:"French Fries",price:7500}],Drink:[{id:1,name:"Cola",price:4600},{id:2,name:"Orange Juice",price:5400},{id:3,name:"Mineral Water",price:3500},{id:4,name:"Coffee",price:5800}]};

function handleChange(e) {
            var $row = e ? $(e).closest(".menu-position") : $('.menu-position')
            var selectedCategory = $row.find('.category-select').val()
            var $typeSelect = $row.find('.type-select')
            var dataOptions = data[selectedCategory]

            $typeSelect.html('')

            dataOptions.forEach(function (option) {
                var optionEle = document.createElement('option')
                optionEle.value = option.id
                optionEle.label = option.name
                optionEle.setAttribute('data-price', option.price)
                $typeSelect.append(optionEle)
            })
        }

        handleChange()

        $(".addRow").click(function () {
            var $typeSelect = $(".type-select").clone()
            var html = '<div class="row outer menu-position">';
            html += '<div class="col-md-3">';
            html += '<button type="button" class="btn btn-danger btn-lg delRow">Del</button>';
            html += '</div>';
            html += '<div class="col-md-3">';
            html += '<select class="form-select form-select-lg mb-3 category-select cat" onChange="handleChange(this)">';
            html += '<option value="Food">Food</option>';
            html += '<option value="Drink">Drink</option>';
            html += '</select>';
            html += '</div>';
            html += '<br>';
            html += '<div class="col-md-3">';
            html += '<select class="form-select form-select-lg mb-3 type-select type">' + $typeSelect.html() + '</select>';
            html += '</div>';
            html += '<div class="col-md-3">';
            html += '<input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">';
            html += '</div>';
            html += '</div>';

            $('.container-fluid').append(html);
        });

        $(document).on('click', '.delRow', function () {
            $(this).closest('.row').remove();
            $('.order').trigger('click')
        });

        $(document).ready(function () {
            $('.order').click(function () {
                var selectMenu = {};
                $("select.type").each(function (i) {
                    selectMenu[i] = {}
                    var text = $(this).find("option:selected").attr('label');
                    var price = Number($(this).find("option:selected").data('price'));
                    var qty = Number($(this).closest(".row").find(".qty").val())
                    selectMenu[i] = {
                        "total": price * qty,
                        "itemname": text,
                        "qty": qty
                    }
                })

                $('.result tbody').html("");
                var total = 0
                $.each(selectMenu, function (index, data) {
                    $('.result tbody').append("<tr class='orders'><td>" + data.qty + '</td><td>' + data.itemname + '</td><td>' + data.total + "</td></tr>");

                    total += parseInt(data.total);
                })
                $(".totalPrice input").val(total)
            });
        });

button[type=submit] {
            width: 50%;
            margin-left: 25%;
            margin-right: 25%;
        }

        button[type=button] {
            font-size: 20px;
            width: 50%;
            margin-left: 25%;
            margin-right: 25%;
        }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
        <div class="container-fluid text-center">
            <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
            <br>
            <div class="row menu-position">
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary btn-lg addRow">Add</button>
                </div>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3 category-select cat" onChange='handleChange(this)'>
                        <option value="Food">Food</option>
                        <option value="Drink">Drink</option>
                    </select>
                </div>
                <br>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3 type-select type"></select>
                </div>
                <div class="col-md-3">
                    <input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">
                </div>
            </div>
        </div>
    </div>
    <br>
    <button type="submit" class="btn btn-secondary order">Order</button>
    <br>
    <br>
    <div class="result text-center">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th style="width:30%">Qty</th>
                    <th style="width:30%">Item name</th>
                    <th style="width:30%">Price</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <br>
    <div class="totalPrice text-center">
        <h4>Total Price</h4>
        <input type="number" class="text-center" disabled>
    </div>

Sorry for asking a lot, hope anyone would be kind to share some tips on the problem i had.

Answer 1

ihave modified your code of order click. I use selectMenu object like that

selectMenu={item:[qty,price,qty*price}, so its easier to group same item. (i avoid to display an item with qty = 0).

var data = {Food:[{id:1,name:"Fried Rice",price:1e4},{id:2,name:"Fried Noodle",price:9e3},{id:3,name:"Pancake",price:8500},{id:4,name:"French Fries",price:7500}],Drink:[{id:1,name:"Cola",price:4600},{id:2,name:"Orange Juice",price:5400},{id:3,name:"Mineral Water",price:3500},{id:4,name:"Coffee",price:5800}]};

function handleChange(e) {
            var $row = e ? $(e).closest(".menu-position") : $('.menu-position')
            var selectedCategory = $row.find('.category-select').val()
            var $typeSelect = $row.find('.type-select')
            var dataOptions = data[selectedCategory]

            $typeSelect.html('')

            dataOptions.forEach(function (option) {
                var optionEle = document.createElement('option')
                optionEle.value = option.id
                optionEle.label = option.name
                optionEle.setAttribute('data-price', option.price)
                $typeSelect.append(optionEle)
            })
        }

        handleChange()

        $(".addRow").click(function () {
            var $typeSelect = $(".type-select").clone()
            var html = '<div class="row outer menu-position">';
            html += '<div class="col-md-3">';
            html += '<button type="button" class="btn btn-danger btn-lg delRow">Del</button>';
            html += '</div>';
            html += '<div class="col-md-3">';
            html += '<select class="form-select form-select-lg mb-3 category-select cat" onChange="handleChange(this)">';
            html += '<option value="Food">Food</option>';
            html += '<option value="Drink">Drink</option>';
            html += '</select>';
            html += '</div>';
            html += '<br>';
            html += '<div class="col-md-3">';
            html += '<select class="form-select form-select-lg mb-3 type-select type">' + $typeSelect.html() + '</select>';
            html += '</div>';
            html += '<div class="col-md-3">';
            html += '<input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">';
            html += '</div>';
            html += '</div>';

            $('.container-fluid').append(html);
        });

        $(document).on('click', '.delRow', function () {
            $(this).closest('.row').remove();
            $('.order').trigger('click')
        });

        $(document).ready(function () {
            $('.order').click(function () {
                var selectMenu = {};
                $("select.type").each(function (i) {
                    //selectMenu[i] = {}
                    var text = $(this).find("option:selected").attr('label');
                    var price = Number($(this).find("option:selected").data('price'));
                    var qty = Number($(this).closest(".row").find(".qty").val());
                    if(text in selectMenu){
                      selectMenu[text][0] += qty;
                      selectMenu[text][1] += price;
                      selectMenu[text][2] += qty*price;                    
                    }else{
                      if(qty > 0) selectMenu[text]=[qty,price,qty*price];     
                    }
                })

                $('.result tbody').html("");
                var total = 0
                $.each(selectMenu, function (key,value) {
                    $('.result tbody').append("<tr class='orders'><td>" + value[0] + '</td><td>' + key + '</td><td>' + value[2] + "</td></tr>");

                    total += parseInt(value[2]);
                });
                $(".totalPrice input").val(total)
            });
        });

button[type=submit] {
            width: 50%;
            margin-left: 25%;
            margin-right: 25%;
        }

        button[type=button] {
            font-size: 20px;
            width: 50%;
            margin-left: 25%;
            margin-right: 25%;
        }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
        <div class="container-fluid text-center">
            <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
            <br>
            <div class="row menu-position">
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary btn-lg addRow">Add</button>
                </div>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3 category-select cat" onChange='handleChange(this)'>
                        <option value="Food">Food</option>
                        <option value="Drink">Drink</option>
                    </select>
                </div>
                <br>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3 type-select type"></select>
                </div>
                <div class="col-md-3">
                    <input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">
                </div>
            </div>
        </div>
    </div>
    <br>
    <button type="submit" class="btn btn-secondary order">Order</button>
    <br>
    <br>
    <div class="result text-center">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th style="width:30%">Qty</th>
                    <th style="width:30%">Item name</th>
                    <th style="width:30%">Price</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <br>
    <div class="totalPrice text-center">
        <h4>Total Price</h4>
        <input type="number" class="text-center" disabled>
    </div>