JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<div id="floor-listing-container">
			<div class="floor-listing-item" id="floor-listing-item-nXVqKbPLYO" data-id="nXVqKbPLYO" data-search-term="testis22">
				
				<h3 class="sorting-handle">Testis22</h3>
			</div>
			<div class="floor-listing-item" id="floor-listing-item-d56Q7YPNxp" data-id="d56Q7YPNxp" data-search-term="some other floor3">
				
				<h3 class="sorting-handle">Some other floor3</h3>
			</div>
			<div class="floor-listing-item active" id="floor-listing-item-9oJP20Qkwy" data-id="9oJP20Qkwy" data-search-term="another floor">
				
				<h3 class="sorting-handle">Another floor</h3>
			</div>
	</div>

</html>

CSS

/*
Property listing items
 */
.floor-listing-item,
.property-listing-item{
	display: block;
	padding: 15px;
	border-top: 1px solid #1f2933;
	position: relative;
	cursor: pointer;
}
.floor-listing-item{
	padding: 0 15px;
}

.floor-listing-item h3,
.property-listing-item h3{
	font-size: 1rem;
	margin-top: 0;
	margin-right: 15px;
}
.floor-listing-item h3{
	padding: 15px 15px 15px 0;
	margin: 0;
}
.search-active .floor-listing-item > h3:hover{
	padding-left: 0;
	background: none;
	cursor: pointer;
}

.property-listing-item h3 small{
	display: block;
	font-weight: 400;
	color: #98a5ab;
	font-size: 1rem;
}
.property-listing-item p:last-child{
	margin-bottom: 0;
}
.property-listing-item p{
	color: #98a5ab;
}
.floor-listing-item.active,
.floor-listing-item:hover,
.property-listing-item.active,
.property-listing-item:hover{
	background: #1f2933;
}

.floor-listing-item .menu,
.property-listing-item .menu{
	width: 30px;
	height: 30px;
	position: absolute;
	top: 9px;
	right: 10px;
}
.floor-listing-item .menu > i,
.property-listing-item .menu > i{
	display: block;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 3px;
	color: #98a5ab;
}
.floor-listing-item .menu:hover > i,
.property-listing-item .menu:hover > i{
	color: #FFF !important;
}
.floor-listing-item .menu ul,
.property-listing-item .menu ul{
	display: none;
}
.floor-listing-item .menu:hover ul,
.property-listing-item .menu:hover ul{
	display: block;
	position: absolute;
	top: 30px;
	right: 0;
	background: #FFF;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 144px;
	z-index: 100;
	overflow: hidden;
	border-radius: 3px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}
.floor-listing-item .menu ul li,
.property-listing-item .menu ul li{
	display: block;
	cursor: pointer;
	color: #495057;
	padding: 5px 15px;
}
.floor-listing-item .menu ul li:hover,
.property-listing-item .menu ul li:hover{
	background: #e9ecef;
	color: #000;
}
.floor-listing-item .menu ul li...

JavaScript

$( function() {
$('#floor-listing-container').sortable({
			update: function( event, ui ) {
				var id = ui.item.attr("data-id");
				var after = $('#floors_'+id).prev().attr('data-id');
				var before = $('#floors_'+id).next().attr('data-id');
				if(typeof after === "undefined"){after = 0;}
				if(typeof before === "undefined"){before = 0;}
				console.log('id:'+id+'b:'+before+ ' a:'+after);

				// $('#dds_form_floors_before').val(before);
				// $('#dds_form_floors_after').val(after);
				// $('#dds_form_floors_id').val(id);
				// $('#dds_form_floors').submit();
			}
		});
    });