JSFiddle - React, Tailwind, and code Playground

by jh798268

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>
  </select>
<div id="fromselect"></div> 
<div id="results"></div>

<div id="allCarGrids">
<div class="car-grid" data-Year="2009">2009</div>
<div class="car-grid" data-Year="2010">2010</div>
<div class="car-grid" data-Year="2011">2011</div>
<div class="car-grid" data-Year="2012">2012</div>
</div>

JavaScript

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') > a.getAttribute('data-Year')
}).appendTo(allCarGrids);

 });