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" data-name="Car A">2009 Car A</div>
<div class="car-grid" data-Year="2010" data-name="Car B" >2010 Car B</div>
<div class="car-grid" data-Year="2011" data-name="Car C">2011 Car C</div>
<div class="car-grid" data-Year="2012" data-name="Car D">2012 Car D</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') > 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 Name Z-A')
$carGridSort.sort(function(a, b) {
    return b.getAttribute('data-name') > a.getAttribute('data-name')
}).appendTo(allCarGrids);

 });