Changes in custom script Fetching items in quotation

Hello,
I have applied filter on the item group and it’s working as I needed but now I want to fetch one or two more item groups to the table. with the following script both of item groups are fetching successfully but they are overwriting one on another,I want them to be added in the table one after another.
can anybody help me and suggest the changes.

frappe.ui.form.on("Quotation", "item_group", function(frm, cdt, cdn) {

    frappe.call({
        method: "frappe.client.get_list",
        args: {
            doctype: "Item",
            filters: {
                "item_group": frm.doc.item_group,


                "is_sales_item": 1
            },
            fields: ["item_code", "item_name", "description", "stock_uom"]
        },
        callback: function(r) {
            var items = [];
            frm.clear_table("items");
            for (var i = 0; i < r.message.length; i++) {
                var d = frm.add_child("items");
                for (var key in r.message[i]) {
                    if (r.message[i].hasOwnProperty(key)) {
                        frappe.model.set_value(d.doctype, d.name, key, r.message[i][key]);
                    }
                }

                if (!d.qty) d.qty = 1;
            }
            frm.refresh_field("items");
        }
    })

})
frappe.ui.form.on("Quotation", "item_group", function(frm, cdt, cdn) {

    frappe.call({
        method: "frappe.client.get_list",
        args: {
            doctype: "Item",
            filters: {
                "item_group": frm.doc.item_group_2,


                "is_sales_item": 1
            },
            fields: ["item_code", "item_name", "description", "stock_uom"]
        },
        callback: function(r) {
            var items = [];
            frm.clear_table("items");
            for (var i = 0; i < r.message.length; i++) {
                var d = frm.add_child("items");
                for (var key in r.message[i]) {
                    if (r.message[i].hasOwnProperty(key)) {
                        frappe.model.set_value(d.doctype, d.name, key, r.message[i][key]);
                    }
                }

                if (!d.qty) d.qty = 1;
            }
        }
    })
});

there are two parent fields item_group and another link field item_group_2 which is linked to item_group so I want to add items of both groups but by above script they are overlapping on each other as shown in bellow image. I want it to be added one after
another please suggest solution

@schilgod please suggest the changes which should be made