JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" style="">
	
	<div id="blocks1" class="blocks" style="left:0%;   background:Blue;"><h4>1</h4></div>		
	<div id="blocks2" class="blocks" style="left:30%;  background:orange;"><h4>2</h4></div>		
	<div id="blocks3" class="blocks" style="left:60%;  background:yellow;"><h4>3</h4></div>		
	<div id="blocks4" class="blocks" style="left:90%;  background:pink;"><h4>4</h4></div>		
	<div id="blocks5" class="blocks" style="left:120%; background:black;"><h4>5</h4></div>		
	<div id="blocks6" class="blocks" style="left:150%; background:whitesmoke;"><h4>6</h4></div>	
</div>
<div id="cont" style="margin-top:150px; background:blue; height:20px; widht:50px; color:white;">
</div>

CSS

#container{
width:100%; 
height:350px; 
position:relative;
overflow:scroll; 
background:white;
top:50px;
overflow:hidden;
}
.blocks{
position:absolute;
width:30%;
height:100%;
}

JavaScript

$(function(){
    
        
        /* here dragscroll not working but in my browser it is works perfectly*/
$('#container').dragScroll({   });    

var div_delete_count = 1;
var div_add_count = 1;

	
var colors = ['rgba(143, 146, 199, 0.49)','rgba(199, 143, 186, 0.49)','rgba(149, 199, 143, 0.49)','rgba(229, 86, 61, 0.49)','rgba(212, 229, 61, 0.49)','rgba(206, 61, 229, 0.49)','rgba(229, 157, 61, 0.49)','rgba(61, 165, 229, 0.49)','rgba(61, 229, 133, 0.49)','rgba(229, 61, 61, 0.49)','rgba(116, 61, 229, 0.49','rgba(218, 229, 61, 0.49)','rgba(21, 43, 157, 0.49)','rgba(153, 157, 21, 0.49)','rgba(199, 143, 186, 0.49)','rgba(149, 199, 143, 0.49)','rgba(229, 86, 61, 0.49)','rgba(212, 229, 61, 0.49)','rgba(206, 61, 229, 0.49)','rgba(229, 157, 61, 0.49)','rgba(61, 165, 229, 0.49)','rgba(61, 229, 133, 0.49)','rgba(229, 61, 61, 0.49)','rgba(116, 61, 229, 0.49','rgba(218, 229, 61, 0.49)','rgba(21, 43, 157, 0.49)','rgba(153, 157, 21, 0.49)','rgba(199, 143, 186, 0.49)','rgba(149, 199, 143, 0.49)','rgba(143, 146, 199, 0.49)','rgba(199, 143, 186, 0.49)','rgba(149, 199, 143, 0.49)','rgba(229, 86, 61, 0.49)','rgba(212, 229, 61, 0.49)','rgba(206, 61, 229, 0.49)','rgba(229, 157, 61, 0.49)','rgba(61, 165, 229, 0.49)','rgba(61, 229, 133, 0.49)','rgba(229, 61, 61, 0.49)','rgba(116, 61, 229, 0.49','rgba(218, 229, 61, 0.49)','rgba(21, 43, 157, 0.49)','rgba(153, 157, 21, 0.49)','rgba(199, 143, 186, 0.49)','rgba(149, 199, 143, 0.49)','rgba(229, 86, 61, 0.49)','rgba(212, 229, 61, 0.49)','rgba(206, 61, 229, 0.49)','rgba(229, 157, 61, 0.49)','rgba(61, 165, 229, 0.49)','rgba(61, 229, 133, 0.49)','rgba(229, 61, 61, 0.49)','rgba(116, 61, 229, 0.49','rgba(218, 229, 61, 0.49)','rgba(21, 43, 157, 0.49)','rgba(153, 157, 21, 0.49)','rgba(199, 143, 186, 0.49)','rgba(149, 199, 143, 0.49)'];

	$("#container").mouseup(function (){
	var on_scroll = $('#container').scrollLeft();
	var round_up = Math.floor(on_scroll/100) *100;

    if(round_up >= 500 && round_up <=600)
	{
		var add_count = 6 +...