All Gridjs tables are getting the same record each time I insert a record in one of them

Question

The following code create dynamically several tables. I mean, based on the size of cameraslist, we can have more or less tables. It works, but for some reason when I insert stuff on one table, the other tables also get the same record. it is duplicating the record across all tables. I tested "value.id" and on each loop the value changes. This value is an html div id. I wonder if I can render several tables in the same page.

Thanks

   function permissions() {
        let listausers = [];
        let usersdumpt = JSON.parse('{{cam_users|tojson|safe}}');
        let cameraslist = JSON.parse('{{cameras|tojson|safe}}');
        var permissions = JSON.parse('{{ cam_permissions| tojson | safe}}');
            //const users = JSON.stringify(usersdumpt, ["email", "notifications", "removable", "role", "username"]);
        var grids = [];
        for (const [key, value] of Object.entries(cameraslist).reverse()) {
            listausers = [];
            let i = 0;
            var div = document.createElement('div');
            div.id = value.id;
            div.style = "width: 100%; height: 100%;"

            document.getElementById('Permissions').appendChild(div);
            for (const [key1, value1] of Object.entries(permissions).reverse()) {
                for (const [key2, value2] of Object.entries(usersdumpt).reverse()) {
                    console.log(value1.user_name);
                    console.log(value2);
                    console.log(value1.cam_id);
                    console.log(value.id);
                    if (value1.user_name == value2 && value1.cam_id == value.id) {
                        listausers.push([key1, value2])
                    }
                }
            }

            console.log(listausers)

            new gridjs.Grid({
                columns: [
                    { id: 'id', name: '#' },
                    { id: 'nomedeutilizador', name: 'Nome de utilizador' }
                ],
                fixedHeader: true,
                data: () => {
                    return new Promise(resolve => {
                        setTimeout(() =>
                            resolve(listausers), 2000);
                    });
                },
                search: {
                    selector: (cell, rowIndex, cellIndex) => [0, 1].includes(cellIndex) ? cell : null,
                },
                sort: true,
                pagination: true,
            }).render(document.getElementById(value.id));
            console.log(value.id);
            setGridSizePer(i, value.id);
            new ResizeObserver(() => setGridSizePer(i,value.id)).observe(document.getElementById(value.id));
            i=i+1;
    }
    }