JavaScript Grid

Set the autoloadstate property of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<button id="add-tab-btn">Add third tab</button>

<div id="layout"></div>

CSS

#add-tab-btn {
  margin: 20px 0;
}

JavaScript

const splitLayoutData = [{
      id: "uno",
      type: "tabs",
      content: "Item1",
      modifiers: ["drag"],
      position: "right"
    },
    {
      id: "due",
      type: "tabs",
      content: "Item2",
      modifiers: ["drag"],
      position: "bottom"
    }
  ];

const layout = new jqxSplitLayout("#layout", {
  dataSource: splitLayoutData
})

const addTabBtn = document.querySelector('#add-tab-btn');
addTabBtn.addEventListener('click', () => {
		
  splitLayoutData.push({
    id: "tre",
    type: "tabs",
    content: "Item3333",
    modifiers: ["drag"],
    position: "right"
  })
	
  $("#layout").jqxSplitLayout({dataSource: splitLayoutData } )
  layout.dataBind()
  
})