JSFiddle - React, Tailwind, and code Playground
HTML
<div class="selected-box">
<select id="cardropdown">
<option selected="selected">Price: Lowest to Highest</option>
<option>Price: Highest to Lowest</option>
<option>Car Name A-Z</option>
<option>Car Name Z-A</option>
<option>Car Year: Lowest to Highest</option>
<option>Car Year: Highest to Lowest</option>
</select>
<div id="fromselect"></div>
<div id="results"></div>
<div id="allCarGrids">
<div class="car-grid" data-price="10000" data-year="2009" data-name="Acurarsx">Acura RSX2009 10000</div>
<div class="car-grid" data-price="20000" data-year="2010" data-name="Gtalowridersdlc" >GTA 5 Lowriders DLC 20000</div>
<div class="car-grid" data-price="30000" data-year="2011" data-name="Toyotaavalonhybrid">Toyota avalon hybrid 30000</div>
<div class="car-grid" data-price="40000" data-year="2012" data-name="greyhatchback">greyhatchback 40000</div>
<div class="car-grid" data-price="50000" data-year="2013" data-name="GreyHachback">Grey Hatchback 50000</div>
<div class="car-grid" data-price="60000" data-year="2014" data-name="bluesportsone">Blue Sports 60000</div>
<div class="car-grid" data-price="70000" data-Year="2015" data-name="Orangehatchback">Orange Hachback 70000</div>
<div class="car-grid" data-price="80000" data-year="2016" data-name="redindy">Red Indy 80000</div>
<div class="car-grid" data-price="90000" data-year="2017" data-name="bluesportstwo">Blue Sports Two 90000</div>
<div class="car-grid" data-price="100000" data-year="2018" data-name="porscheone">Porsche One 10000</div>
<div class="car-grid" data-price="110000" data-year="2012" data-name="Audir">AUDI R8 110000</div>
<div class="car-grid" data-price="120000" data-year="2013" data-name="Bentlyflyingspur">BENTLEY FLYING SPUR 120000</div>
<div class="car-grid" data-price="130000" data-year="2014" data-name="Bentlybentayga">BENTLEY BENTAYGA 130000</div>
<div class="car-grid" data-price="140000" data-year="2015" data-name="Mercedesbenzamg">MERCEDES-BENZ S 65 AMGe 140000</div>
<div class="car-grid"...
JavaScript
var $allCarGrids = $('#allCarGrids');
var $carGridSort = $('.car-grid');
$( "#cardropdown" ).change(function() {
if(this.value === 'Price: Highest to Lowest')
$carGridSort.sort(function(a, b) {
return b.getAttribute('data-year') > a.getAttribute('data-year')
}).appendTo($allCarGrids);
if(this.value === 'Price: Lowest to Highest')
$carGridSort.sort(function(a, b) {
return a.getAttribute('data-year') > b.getAttribute('data-year')
}).appendTo($allCarGrids);
if(this.value === 'Car Name A-Z')
$carGridSort.sort(function(a, b) {
return a.getAttribute('data-name') > b.getAttribute('data-name')
}).appendTo($allCarGrids);
if(this.value === 'Car Year: Highest to Lowest')
$carGridSort.sort(function(a, b) {
return b.getAttribute('data-name') > a.getAttribute('data-price')
}).appendTo($allCarGrids);
if(this.value === 'Car Year: Lowest to Highest')
$carGridSort.sort(function(a, b) {
return b.getAttribute('data-name') > a.getAttribute('data-price')
}).appendTo($allCarGrids);
});