JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://dsmorse.github.io/gridster.js/demos/assets/css/demo.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://dsmorse.github.io/gridster.js/dist/jquery.gridster.min.js"></script>

<div class="gridster">
    <ul>
    
    </ul>
        
</div>

	<button class="btn btn-outline-info" id="check"> Check If unique selected </button>

CSS

.red{
  background-color:red !important;
}

JavaScript

var gridster;

gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [100, 100],
  widget_margins: [5, 5],
  helper: 'clone',
   serialize_params: function($w, wgd) {return {images: $w.find('textarea').val().trim() , col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y}},
  resize: {
    enabled: true
  }
}).data('gridster');

var json = [{
    "id" : 1,
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
   "id" : 2,
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},

{
    "id" : 3,
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},


{
    "id" : 4,
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
   "id" : 5,
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},

{
    "id" : 6,
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];


for(var index=0;index<json.length;index++) {
   
		

gridster.add_widget(`<li class="new" id="${index}" ><button class="select-element" style="float: right;">-</button></li>`,json[index].size_x,json[index].size_y,json[index].col,json[index].row);
}

var parentElement = [];

$(document).on("click", ".select-element", function() {
     
     $(this).closest('li').toggleClass("red");
		parentElement.includes($(this).closest('li').attr("id")) ? parentElement.splice(parentElement.indexOf($(this).closest('li').attr("id"),1)) : parentElement.push($(this).closest('li').attr("id"));
		
     console.log("Parent Element Array Length");
	 
		  		 console.log(parentElement);
	 
			
});
	

$(document).on("click", "#check", function() {
	       
     alert(checkIfArrayIsUnique(parentElement));
		
	});
  
  
  
function checkIfArrayIsUnique(myArray) 
    {
         var duplicates = parentElement.reduce(function(acc, el, i, arr) {
  if (arr.indexOf(el) !== i && acc.indexOf(el) < 0) acc.push(el); return acc;
}, []);
         return duplicates.length >= 0
    }