Dynamically loading two or more gridster grids and widgets

Question

My application requires grids to be added and loaded dynamically upon loading the page or programmatically.

Adding one grid at a time at runtime works.

Loading two or more grids simultaneously and dynamically results in the second one working but the first one failing. The grid loads but the widgets are all piled upon at row 1 col 1 and cannot be moved.

My method:

1. get a 'serialisation' array of grids and widgets (from indexeddb) to load grids and widgets
2. dynamically add each of the gridster divs and uls inside a container row. Attribute unique ids to each gridster div as the 'namespace' specified in the grid options
3. dynamically add html to the page to add the li widgets inside each grid ul. Each widget contains serialize parameterss including the parent grid. (All the gridster div, ul and widget il elements are dynamically appended to the page before instantiating it all).
4. All works this far (a bit like recreating the 'grid-from-serialize.html' demo but with two grids and multiple widgets per grid.

Instantiate each grid where gridster[i] will be gridster[0] and second time round gridster[1] and where thisNamespace is a variable name (grid1, grid2...) and will be the unique gridster id in the parent div.

$(function () {
gridster[i] = $(thisNamespace+" ul").gridster({
namespace: thisNamespace,

The second one works. However, in the first grid, the widgets are piled up on row 1 col 1 and can't be moved but the grid is of the correct proportions defined.

The full code for instantiating the grids in a for loop inside a promise to ensure each step completes before starting the next:

$(function () {
    gridster[i] = $(thisNamespace+" ul").gridster({
    namespace: thisNamespace,
    widget_base_dimensions: [200, 140],
    widget_margins: [10, 10],
    rows: 1,
    max_rows: 1,
    extra_cols: 5,
    min_cols: 20,
    max_cols: 25,
     serialize_params: function ($w, wgd) {
    return {
        'data-plotlineid': $w.attr('data-plotlineid'),
        'data-heading': $w.attr('data-heading'),
        'data-plotlinegrid': $w.attr('data-plotlinegrid'),
        col: wgd.col,
        row: wgd.row,
        size_x: wgd.size_x,
        size_y: wgd.size_y
        };
    },
    scroll_container: $('#story-panel-body-middle'),
    shift_widgets_up: false,
    move_widgets_down_only: true,
    s_down: false,
    collision: {
    wait_for_mouseup: true
        },
  draggable: {
            handle: 'header'
        }
  }).data('gridster');

I tried adapting the build grids from serialize example https://dsmorse.github.io/gridster.js/demos/grid-from-serialize.html, but adding two or more grids with multiple widgets from an array.