JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<title>jQuery EasyUI Demo</title>
<body style="margin:0;padding:0;height:100%;background:#fafafa;">
	<ul class="products">
		<li>
			<a href="#" class="item">
				<div>
					<p>Control Room A</p>
					<p>Price:₱ 700</p>
				</div>
				<img width="115.989px"; height="111.133px" src="images/control1.png">
			</a>
		</li>
		<li>
			<a href="#" class="item">
				<div>
					<p>Control Room B</p>
					<p>Price:₱ 400</p>
				</div>
				<img width="115.989px"; height="111.133px" src="images/control2.png">
			</a>
		</li>
		<li>
			<a href="#" class="item">
				<div>
					<p>Control Room C</p>
					<p>Price:₱ 500</p>
				</div>
				<img width="115.989px"; height="111.133px" src="images/control3.png">
			</a>
		</li>
		<li>
			<a href="#" class="item">
				<div>
					<p>Control Room D</p>
					<p>Price:₱ 400</p>
				</div>
				<img width="115.989px"; height="111.133px" src="images/control4.png">
			</a>
		</li>
		<li>
			<a href="#" class="item">
				<div>
					<p>Booth A</p>
					<p>Price:₱ 500</p>
				</div>
				<img width="115.989px"; height="111.133px" src="images/boothA.png">
			</a>
		</li>
		<li>
			<a href="#" class="item">
				<div>
					<p>Booth B</p>
					<p>Price:₱ 200</p>
				</div>
				<img width="115.989px"; height="111.133px" src="images/boothB.png">
			</a>
		</li>
				<li>
			<a href="#" class="item">
				<div>
					<p>Booth C</p>
					<p>Price:₱ 300</p>
				</div>
				<img width="115.989px"; height="111.133px" src="images/boothC.png">
			</a>
		</li>
				<li>
			<a href="#" class="item">
				<div>
					<p>Booth D</p>
					<p>Price:₱ 300</p>
				</div>
				<img width="115.989px"; height="111.133px" src="images/boothD.png">
			</a>
		</li>
				<li>
			<a...

CSS

<style type="text/css">
		.products{
			list-style:none;
			margin-right:300px;
			padding:0px;
			height:100%;
		}
		.products li{
			display:inline;
			float:left;
			margin:10px;
		}
		.item{
			display:block;
			text-decoration:none;
		}

		.item p{
			font-family:Arial,Helvetica,sans-serif;
			margin:0;
			font-weight:regular;
			text-align:center;
			color:#000000;
		}
		.cart{
			position:fixed;
			right:0;
			top:0;
			width:300px;
			height:100%;
			background:#ccc;
			padding:0px 10px;
		}
		h1{
			text-align:center;
			color:#555;
		}
		h2{
			position:absolute;
			font-size:16px;
			left:10px;
			bottom:20px;
			color:#555;
		}
		.total{
			margin:0;
			text-align:right;
			padding-right:20px;
		}
	</style>

JavaScript

var data = {"total":0,"rows":[]};
		var totalCost = 0;


		
		$(function(){

            
			$('#cartcontent').datagrid({
				singleSelect:true
			});
			$('.item').draggable({
				revert:true,
				proxy:'clone',
				onStartDrag:function(){
					$(this).draggable('options').cursor = 'not-allowed';
					$(this).draggable('proxy').css('z-index',10);
				},
				onStopDrag:function(){
					$(this).draggable('options').cursor='move';
				}
			});
			$('.cart').droppable({
				onDragEnter:function(e,source){
					$(source).draggable('options').cursor='auto';
				},
				onDragLeave:function(e,source){
					$(source).draggable('options').cursor='not-allowed';
				},
				onDrop:function(e,source){
					var name = $(source).find('p:eq(0)').html();
					var price = $(source).find('p:eq(1)').html();
					addProduct(name, parseFloat(price.split('₱')[1]));
				}
			});
		});
		
		function addProduct(name,price){
			function add(){
				for(var i=0; i<data.total; i++){
					var row = data.rows[i];
					if (row.name == name){
						row.quantity += 1;
						return;
					}
				}
				data.total += 1;
				data.rows.push({
					name:name,
					quantity:1,
					price:price
				});
			}
			add();
			totalCost += price;
			$('#cartcontent').datagrid('loadData', data);
			$('div.cart .total').html('Total: ₱ '+totalCost);
            var h = "<select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option></select>";
            $('.datagrid-btable tr:last td:eq(1)').html(h);
            $('select').unbind('change');
            $('select').click(function(){
                //alert( $( this ).text() );
            });
                       /* $( ".datagrid-btable select" ).on( "change", "select", function() {
  alert( $( this ).text() );
});*/
		}