JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js"></script>

JavaScript

var arraysOfObject = [],
  obj = {
    "IDNumber": ""
  },
  system = {};

for (i = 0; i < 72; i++) {
  arraysOfObject.push({
    "IDNumber": "Number " + i
  });
}

var index = 0;
var array2 = [];
var leftOver = arraysOfObject.length % 10;
var groupsOfTen = (arraysOfObject.length - leftOver) / 10;
for (var i = 0; i < groupsOfTen; i++) {
  array2.push([]);
  system[index+1] = index++;
  for (var j = i * 10; j < i * 10 + 10; j++)
    array2[i].push(arraysOfObject[j]["IDNumber"]);
}

//now take care of the leftover
if (leftOver > 0) {
  array2.push([]);
  for (var i = groupsOfTen * 10; i < arraysOfObject.length; i++)
    array2[array2.length - 1].push(arraysOfObject[i]["IDNumber"]);
  system[index+1] = index++;
}

var gui = new dat.GUI();
var guiData = function() {
  this.message = "Dat.Gui menu";
  this.system = 0;
  this.Sets = 0;
};

var data = new guiData();
sets = [...array2];

gui.add(data, 'message', 'Dat.Gui Menu!');
gui
	.add(data, 'system', system)
	.name('system #')
  .onChange(function(value) {
  	updateSets(value);
	});
gui.add(data, 'Sets', sets[0]).onChange();

function updateSets(id) {
  var controller = gui.__controllers[2];
  controller.remove();
  gui.add(data, 'Sets', sets[id]).onChange();

  data.Sets = 0;
  gui.__controllers[2].updateDisplay();
}