Duplicate table's headers

I have a table that I populate in onload_post_render

onload_post_render: function(frm){
    if (localStorage.getItem('rfid_scans') != null){
        frappe.call({
            method: "weigh_station.utils.rfid.get_rfid_scan_items",
            args: {data: localStorage.getItem('rfid_scans')}
        }).done((result) => {
            frm.doc.count_entry_items = []
            $.each(result, function(i, data){
                console.log("data", data);
                let entry = frm.add_child("count_entry_items");
                entry.item = data[0][0];
                entry.quantity = data[0][1];
            })
            refresh_field('count_entry_items');
        })
    }
},

For some reason the form show multiple tables and multiple tables headers.
This only happen in mobiles, in desktop I do not have this issue.

What could be the reason of this?