JSFiddle - React, Tailwind, and code Playground

by Niki Molnar

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	<div class="container-fluid">
		<div class="row">
			<div class="sorting-options">
							
				<select class="sorting" id="selectSort">
					<option value="priceLow">Price (Low To High)</option>
					<option value="priceHigh">Price (High To Low)</option>
					<option value="yearHigh">New To Old</option>
					<option value="yearLow">Old To New</option>
				</select>
             </div>
        </div>

		<div class="clearfix"></div>
		
		<div class="row col-sm-12 p-0 m-0" id="resultsBoxes">
			
			<div class="col-sm-6 fadeInUp delay-02s boatResult" data-price="3500" data-year="1976">
				<div class="boat">
					Boat 1 Price 3500 / Year 1976
				</div>
			</div>
			<div class="col-sm-6 boatResult" data-price="62" data-year="2008">
				<div class="boat">
					Boat 2 Price 62 / Year 2008
				</div>
			</div>
			<div class="col-sm-6 boatResult" data-price="11" data-year="2010">
				<div class="boat">
					Boat 3 Price 11 / Year 2010
				</div>
			</div>
			<div class="col-sm-6 boatResult" data-price="43" data-year="2001">
				<div class="boat">
					Boat 4 Price 43 / Year 2001
				</div>
			</div>
		</div>
	</div>

CSS

div.boat {
    font-family: sans-serif;
    background: blue;
    padding: 10px;
    font-weight: bold;
    color: #fff;
    font-size: 20px;
    text-align: center;
	margin-bottom:10px;
}

JavaScript

$('#selectSort').on('change', function(e) {
	e.preventDefault();
	var selectedSort = $(this).val();
	var wrapper = $('#resultsBoxes');
	console.log(selectedSort);
	if(selectedSort=='priceHigh') {
		wrapper.find('.boatResult').sort(function (a, b) {
			return +b.dataset.price - +a.dataset.price;
		})
		.appendTo( wrapper );
	} else if(selectedSort=='priceLow') {
		wrapper.find('.boatResult').sort(function (a, b) {
			return +a.dataset.price - +b.dataset.price;
		})
		.appendTo( wrapper );
	} else if(selectedSort=='yearLow') {
		wrapper.find('.boatResult').sort(function (a, b) {
			return +a.dataset.year - +b.dataset.year;
		})
		.appendTo( wrapper );
	} else if(selectedSort=='yearHigh') {
		wrapper.find('.boatResult').sort(function (a, b) {
			return +b.dataset.year - +a.dataset.year;
		})
		.appendTo( wrapper );
	}

});