JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@3.3.0/dist/gridstack.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@3.3.0/dist/gridstack-jq.js"></script>
<button onclick="lockToggle()">toggle</button>
<button onclick="grid2.addWidget()">add</button>
<button onclick="grid2.removeAll()">clear</button>
<div class="container">
    <div class="main-grid-container">
      <div id="main-grid" class="right-grid grid-stack" >
      </div>
    </div>
 </div>

CSS

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    height: 100vh;
    width: 100vw;
    margin: 0;
    box-sizing: border-box;
    font-size: 62.5%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: rgb(216, 216, 216);
}

.container {
    height: 70vh;
    width: 70vw;
    
    background-color: rgb(252, 252, 252);

    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 10% 90%;
    grid-row-gap: 0px;
    grid-column-gap: 0px;
}


.main-grid-container {
    grid-column: 2;
    height: 100%;
    width: 100%;
    background-color: gray;
    overflow-y: auto;
}


.grid-stack-item-content{
    background-color: rgb(206, 214, 167);
    font-size: large;
}

.right-grid{
    background-color: gray;
}

.drag-border {
    border: solid 5px cyan;
}

.grid-stack-placeholder {
    display: block;
}

JavaScript

let options2 = {
    disableResize: true,
    cellHeight: 150,
    cellWidth: 150,
    float: true,
    row: 6,
    disableDrag: true
  };

  let grid2 = GridStack.init(options2, '#main-grid');


  // functions - - - - - - - - -

  
  let lockState = true;
  
  function lockToggle() {
  	if (lockState) {
    	grid2.enableMove(true);
      lockState = false;
    }
    
    else {
    	grid2.disable();
      lockState = true;
    }
    
    console.log('clicked');
  }