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 = [{
"col": 1,
"row": 1,
"size_y": 2,
"size_x": 2
}, {
"col": 4,
"row": 1,
"size_y": 2,
"size_x": 2
},
{
"col": 6,
"row": 1,
"size_y": 2,
"size_x": 2
},
{
"col": 1,
"row": 3,
"size_y": 1,
"size_x": 1
}, {
"col": 4,
"row": 3,
"size_y": 1,
"size_x": 1
},
{
"col": 6,
"row": 3,
"size_y": 1,
"size_x": 1
}
];
for(var index=0;index<json.length;index++) {
gridster.add_widget('<li class="new" ><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 = {};
var uniqueId = 0;
$(document).on("click", ".select-element", function() {
var closestLI = $(this).closest('li');
closestLI.toggleClass("red");
if(parentElement[closestLI.attr('id')] !== undefined){
delete parentElement[closestLI.attr('id')];
}else {
closestLI.attr('id', uniqueId);
parentElement[uniqueId++] = closestLI;
}
console.log("Parent Element Array Length", Object.keys(parentElement).length);
$.each(parentElement, function(i, v){
console.log(v);
});
});