Sort divs using data attributes and JS

Question

I asked an almost identical question about 5 months ago and got a great answer that seemed to work at the time. Since then I have taken a break and have not looked at so much as a line of code. Now that I have some free time, I am realizing I am quite rusty with Javascript.

Link to previous question: https://stackoverflow.com/questions/38470543/sort-divs-using-data-attributes-and-javascript

This is my current JSFiddle. jsfiddle.net/wtckhkdq/3/

As you can see I have 4 divs with a variety of data attributes including price, date of listing, and alphabetical rank. I am trying to get the script working so that when each button is pressed, it sorts the divs according to the referenced function. My JSFiddle will not run properly and after looking it over multiple times I can't seem to find what's wrong. Thanks in advance and happy new years to all!

Answer 1

1. You need to include the jquery library to use it.
2. In jsfiddle, due to the way they wrote there final output builder, there is a problem with js-scoping, so the functions you created weren't visible by the html block. You can fix this specifically by changing the function sortDateNewOld (){ to sortDateNewOld = function(){ inside jsfiddle.

Here is a fix (and everything work)

var divList = $(".listing");

function sortDateNewOld() {
  divList.sort(function(a, b){ return $(b).data("date")-$(a).data("date")});    
  $("#list").html(divList);
}

function sortDateOldNew(){
  divList.sort(function(a, b){ return $(a).data("date")-$(b).data("date")});    
  $("#list").html(divList);}

function sortPriceHighLow(){
  divList.sort(function(a, b){ return $(b).data("price")-$(a).data("price")});    
  $("#list").html(divList);}

function sortPriceLowHigh(){
  divList.sort(function(a, b){ return $(a).data("price")-$(b).data("price")});    
  $("#list").html(divList);}

function sortAlphAZ(){
  divList.sort(function(a, b){ return $(a).data("alph")-$(b).data("alph")});    
  $("#list").html(divList);}

function sortAlphZA(){
  divList.sort(function(a, b){ return $(b).data("alph")-$(a).data("alph")});    
  $("#list").html(divList);}

.button {
  font-size: 15px; width: 120px; height: 30px; background-color: white; display: inline-block; cursor: pointer;}

.listing {
  width: 342px; height: 282px; border-radius: 7px; background-color: #f1f1f1; margin: auto; margin-top: 80px; position: relative; box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.15);}

.listinginfo {
  width: 342px; height: 64px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; background-color: white; position: absolute; bottom: 0; left: 0; box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.05); font-size: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button class="button" onclick="sortDateNewOld()">Date New-Old</button>
    <button class="button" onclick="sortDateOldNew()">Date Old-New</button>
    <button class="button" onclick="sortAlphAZ()">Name A-Z</button>
    <button class="button" onclick="sortAlphZA()">Name Z-A</button>
    <button class="button" onclick="sortPriceHighLow()">Price High-Low</button>
    <button class="button" onclick="sortPriceLowHigh()">Price Low-High</button>
    
<div id="list">
    
    <!------------------------------------------------------------->
    <div class="listing"
            data-price="99"
            data-date="20171201"
            data-alph="010101"
            style="background-image: url()">
            <div class="listinginfo">
            AAA<br>
            Price: $99<br> 
            Date: December 1, 2017
            </div>
    </div>
    <!------------------------------------------------------------->
    
    <!------------------------------------------------------------->
    <div class="listing"
            data-price="199"
            data-date="20171202"
            data-alph="010102"
            style="background-image: url()">
            <div class="listinginfo">
            AAB<br>
            Price: $199<br> 
            Date: December 2, 2017
            </div>
    </div>
    <!------------------------------------------------------------->
    
    <!------------------------------------------------------------->
    <div class="listing"
            data-price="299"
            data-date="20171203"
            data-alph="010103"
            style="background-image: url()">
            <div class="listinginfo">
            AAC<br>
            Price: $299<br> 
            Date: December 3, 2017
            </div>
    </div>
    <!------------------------------------------------------------->
    
    <!------------------------------------------------------------->
    <div class="listing"
            data-price="399"
            data-date="20171204"
            data-alph="010104"
            style="background-image: url()">
            <div class="listinginfo">
            AAD<br>
            Price: $399<br> 
            Date: December 4, 2017
            </div>
    </div>
    <!------------------------------------------------------------->
    
</div>