GridStack - re-initialise existing grids

I have a element that has gridstack initialised against it.

I want to save and reload my page, and i want the grid to be usable when the page is loaded. So when i load the page i want to re-initialise the gridstack element.

the trouble is it just adds duplicate classes into the element and its children.

<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>    
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; display: none;"></div>    
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>    
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; display: none;"></div>

also i get multiple classes added to the root element:

class="grid-stack grid-stack-instance-4036 grid-stack-instance-4052"

so what is the best way to re-initialise the grid?

So here's my solution to this issue:

var stacks = $(".grid-stack");
stacks.each(function () {
            var grid = $(this).data("gridstack");
            if (typeof grid !== "undefined") {
                  grid.destroy(false);
            }

            //use regex to remove the multiple classnames
            $(this).removeClass(function (index, className) {
                  return (className.match(/(^|\s)grid-stack-instance-\S+/g) || []).join(" ");
            });
            $(this).find(".ui-resizable-handle").remove();
});