Unable to load use GridStack.init

My problem in the console is so unclear. I already make var grid = GridStack.init outside the fuction but I unable to solve this problem Error log: 1) GridStack.initAll() no grid was found with selector ".grid-stack" - element missing or wrong selector ? Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector. 2) Uncaught TypeError: Cannot read properties of null (reading 'load')

The problem 1) will be gone if I put gridSrack.initAll inside updateUI()

My full code:


 <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
  <script src="node_modules/gridstack/dist/es5/gridstack-poly.js"></script>
  <script src="node_modules/gridstack/dist/es5/gridstack-all.js"></script>
  <link href="node_modules/gridstack/dist/gridstack-extra.min.css" rel="stylesheet"/>

  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

 <script type="text/javascript">
var  grid = GridStack.init({
    cellHeight: 70,
    acceptWidgets: true,
    removable: '#removeDrop'
  });

  let itemFull = [];
  let items = [];

  function loadFullGrid() {
      if (!localStorage.getItem('itemsOk') ) { return }
    items = JSON.parse(localStorage.getItem('itemsOk')).items
    grid.load(items);
    updateUI();
    }
    loadFullGrid();

    function updateUI(name, scale, topic, SetOnmessage, SetOffmessage) {

      let buttonHTML = ''
      buttonHTML = `
    <div class="grid-stack-item">
      <div class="grid-stack-item-content">
        <button id="${name}" style="font-size: ${scale}px;" class = "button-54" 
          onpointerup="publishMessage(${SetOnmessage},${topic});" 
          onpointerdown="publishMessage(${SetOffmessage},${topic})">
          ${name}
        </button>
      </div>
    </div>`
      // Add the widget to the grid
      grid.addWidget(buttonHTML);
      itemFull = grid.save(true, true);
      items = itemFull.children;
     localStorage.setItem('itemsOk',JSON.stringify(items));
    }

    function Addbutton() {

      var text = prompt("Enter the text to display on the button:");
      while ((text === "")) {
        text = prompt("Enter the text to display on the button: 'Need to fill any text'");
      }
      if (text === null) {
        return
      }
      var sizeM = prompt("Enter the size of the button (in pixels):", 50);
      while ((sizeM === "")) {
        sizeM = prompt("Enter the size of the button (in pixels):", 50);
      }

      if (sizeM === null) {
        return
      }
      var topic = prompt("Enter topic", "#");
      while ((topic === "")) {
        topic = prompt("Enter topic", "#");
      }
      if (topic === null) {
        return
      }
      var SetOnmessage = prompt("Enter message to sent when click", 1);
      while ((SetOnmessage === "")) {
        SetOnmessage = prompt("Enter message to sent when click", 1);
      }
      if (SetOnmessage === null) {
        return
      }
      var SetOffmessage = prompt("Enter message to sent when not click", 0);
      while ((SetOffmessage === "")) {
        SetOffmessage = prompt("Enter message to sent when notclick");
      }
      if (SetOffmessage === null) {
        return
      }
      if (text === null && sizeM === null && topic === null && SetOnmessage === null && SetOffmessage === null) {
        return
      }
      updateUI(text, sizeM, topic, SetOnmessage, SetOffmessage);
    }

body part:

<body>

  <div class="grid-stack">

  </div>

  <div id="removeDrop" class="ui-droppable">
    Remove
  </div>

  <div id="Top_add">
    <button class="Btn" role="button" id="createButton" onclick="Addbutton()">+</button>

  </div>

</body>

Thank you in advance. Thank you for your dedicate time

gridstack / gridstack.js

Unable to load use GridStack.init #2637