JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gridcontainer">
			<div id="reserved_1" class="railing"></div>
			<div id="railing_1" class="railing"></div>
			<div id="reserved_2" class="railing"></div>
			<div id="railing_2" class="railing"></div>
			<div id="reserved_3" class="railing"></div>
			<div id="railing_3" class="railing"></div>
			<div id="reserved_4" class="railing"></div>
			<div id="railing_4" class="railing"></div>
			<div id="reserved_5" class="railing"></div>
			<div id="railing_5" class="railing"></div>
			<div id="reserved_6" class="railing"></div>
			<div id="railing_6" class="railing"></div>
			<div id="reserved_7" class="railing"></div>
			<div id="railing_7" class="railing"></div>
		</div>

CSS

.taskbar{
	display:inline;
	border: 4px solid black;
	margin:0px;
	background: #ccc;
	min-width:12px;
	min-height:12px;
}

.railing{
	min-width:1000px;
	min-height:20px;
	display:block;
	border: 1px solid gray;
	
}

JavaScript

$().ready(function(){
			    var railingId;
				var taskId;
				var jTaskId;
				var oNewP;
				var oText;
				var taskList = {
					"tasks": [
					{ "id":"1" , "line":"1"  }, 
					{ "id":"2" , "line":"1" }, 
					{ "id":"3" , "line":"2"  }
					]
				};
				for(var i = 0; i<taskList.tasks.length; i++){
					//alert(taskList.tasks[i].duration);
					railingId = "railing_" + taskList.tasks[i].line;
					taskId = "task_" + taskList.tasks[i].id;
					oNewP = document.createElement("div");
					oText = document.createTextNode(taskList.tasks[i].id);
					oNewP.setAttribute("id",taskId);
					oNewP.setAttribute("class","taskbar");
					oNewP.appendChild(oText);
					document.getElementById(railingId).appendChild(oNewP);
					jTaskId = "#" + taskId;
					$(jTaskId)
						.draggable({ 
									grid: [ 24, 44 ],
									containment: "#gridcontainer",
									axis: "x, y" 
									})
						.resizable({
									grid: [ 24, 0 ],
									handles: "e, w",
									containment: "#gridcontainer"
									});
				}
			 });
        $('#task_2').css("width","100px");