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://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="gridster">
<!--  <li> from JSON are placed here -->
    <ul>
    
    </ul>
     <button class="js-seralize btn btn-success mr-2"> Serialize </button>
     <textarea class="textarea form-control" id="log"></textarea>
</div>


 
<!--  Declaration of Modal -->

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Add Icons</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"           onclick="removeclasses()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      
      <!--  Images which I retrieve from backend for now they are 
      hardcoded paths and actually are dynamic(No fixed number)-->


<div class="outerdiv"><img src="https://cdnd.icons8.com/wp-content/uploads/2015/07/Run-Command-100.png"></div>
      <div class="outerdiv"><img src="https://png.icons8.com/metro/2x/chapel.png"></div>
      <div class="outerdiv"><img src="https://png.icons8.com/metro/2x/boy.png"></div>
      <div class="outerdiv"><img src="https://png.icons8.com/metro/2x/wacom-tablet.png"></div>
	  
      </div>
     ...

CSS

textarea {
  resize: none;
  overflow: scroll;
  width: 80%;
}
.removediv {position:absolute;right:1%;top:1%;}

.preselect{
  background: lightgreen
}


.images{

position: absolute;
height: 100%;
width: 100%	;
top: 0;
left: 0;
	
}

.imagewrap {display:inline-block;
position:relative; 

min-height: 50px;
min-width:  50px;

max-height: 100px;
max-width:100px;

width: 25%;

margin-top: 20px;

}


.modal-body {
  width: 100%;
  position: relative;
  text-align:center;
}

.outerdiv {
  height: 30%;
  width: 30%;
  display:inline-block;
}

JavaScript

var gridster;
//Initializing 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('.imagenames').val().trim(),title: $w.find('.hoverinformation').val().trim() , col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y}},
  resize: {
    enabled: true
  }
}).data('gridster');



//JSON which I get from backend
    
 var json = [ {
    "images":"https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", // 2 Images
    "title":"EF",
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},

 {
    "images":"https://png.icons8.com/metro/2x/wacom-tablet.png,https://png.icons8.com/metro/2x/boy.png,https://png.icons8.com/metro/2x/boy.png", 
    "title":"AB,DE,EF",
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}

];

//Loop which runs over JSON to generate <li> elements in HTML

for(var index=0;index<json.length;index++) {
    var images = json[index].images.split(',');
    var titles = json[index].title.split(',');
		var imageOutput = "";

		for(var j = 0; j < images.length; j++) {
    	imageOutput += '<div class="imagewrap"><img class="images" src='+ images[j] +' title="' + titles[j]+ '"> <input type="button" class="removediv" value="X" /></div></div>';
		}

gridster.add_widget('<li class="new" ><button class="addmorebrands" style="float: left;">+</button><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '<textarea class="imagenames">'+json[index].images+'</textarea><textarea class="hoverinformation">'+json[index].title+'</textarea></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
}

function trimChar(string, charToRemove) {
    while(string.charAt(0)==charToRemove) {
        string = string.substring(1);
    }

    while(string.charAt(string.length-1)==charToRemove) {
        string = string.substring(0,string.length-1);
    }

   ...