How can I sort my divs by data attributes on click using javascript?

Question

I have multiple divs that I want to be able to sort by various data attributes on click, in a drop-down sorting style. (Excuse all the fluff. The divs are "element-1" and the container is "board-container".

var divList = $(".element-1");

function sortPrice(){
divList.sort(function(a, b){ return    
$(a).data("price")-$(b).data("price")});    
$(".board-container").html(divList);}

function sortPopularity(){
divList.sort(function(a, b){ return
$(a).data("popularity")-$(b).data("popularity")});    
$(".board-container").html(divList);}


<div class="board-container">
    <div class="element-1" data-date="4" data-popularity="3">
    <a class="group1" href="img/zayn.png">
        <div class="overlay-wrapper">
            <div class="overlay-text">
                <div class="table">
                    <div class="cell">

                        <div class="title">King Kunta</div>
                        <div class="artist">Kendrick Lamar</div>
                    </div>
                </div>
            </div>
        </div>
        <img src="img/kunta.png">
    </div>
    <div class="element-1" data-date="3" data-popularity="3">
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?     rel=0&amp;wmode=transparent">
    <div class="overlay-wrapper">
            <div class="overlay-text">
                <div class="table">
                    <div class="cell">

                        <div class="title">King Kunta</div>
                        <div class="artist">Kendrick Lamar</div>
                    </div>
                </div>
            </div>
        </div>
        <img src="img/astrid.png">
    </div>
    <div class="element-1" data-date="1" data-popularity="12">
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?rel=0&amp;wmode=transparent">
    <div class="overlay-wrapper">
            <div class="overlay-text">
                <div class="table">
                    <div class="cell">

                        <div class="title">King Kunta</div>
                        <div class="artist">Kendrick Lamar</div>
                    </div>
                </div>
            </div>
        </div>
        <img src="img/zayn.png">
    </div>
    <div class="element-1" data-date="5" data-popularity="1">
    <div class="overlay-wrapper">
            <div class="overlay-text">
                <div class="table">
                    <div class="cell">
                        <div class="title">King Kunta</div>
                        <div class="artist">Kendrick Lamar</div>
                    </div>
                </div>
            </div>
        </div>
        <img src="img/jason.png">
    </div>
  </div>

Answer 1

Use a dropdown and bind change event handler, within the handler sort the elements based on selected value.

var $divList = $(".element-1");

$('#drop').change(function() {
  var prop = this.value;
  $divList.sort(function(a, b) {
    return $(a).data(prop) - $(b).data(prop)
  }).appendTo(".board-container")
}).change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="drop">
<option value="date">Date</option>
<option value="popularity">Popularity</option>
</select>
<div class="board-container">
  <div class="element-1" data-date="4" data-popularity="3">
    <a class="group1" href="img/zayn.png">
      <div class="overlay-wrapper">
        <div class="overlay-text">
          <div class="table">
            <div class="cell">

              <div class="title">King Kunta</div>
              <div class="artist">Kendrick Lamar</div>
            </div>
          </div>
        </div>
      </div>
    </a>1
    <img src="img/kunta.png" />
  </div>
  <div class="element-1" data-date="3" data-popularity="3">
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?     rel=0&amp;wmode=transparent">
      <div class="overlay-wrapper">
        <div class="overlay-text">
          <div class="table">
            <div class="cell">

              <div class="title">King Kunta</div>
              <div class="artist">Kendrick Lamar</div>
            </div>
          </div>
        </div>
      </div>
    </a>2
    <img src="img/astrid.png">
  </div>
  <div class="element-1" data-date="1" data-popularity="12">
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?rel=0&amp;wmode=transparent">
      <div class="overlay-wrapper">
        <div class="overlay-text">
          <div class="table">
            <div class="cell">

              <div class="title">King Kunta</div>
              <div class="artist">Kendrick Lamar</div>
            </div>
          </div>
        </div>
      </div>
    </a>3
    <img src="img/zayn.png">
  </div>
  <div class="element-1" data-date="5" data-popularity="1">
    <div class="overlay-wrapper">
      <div class="overlay-text">
        <div class="table">
          <div class="cell">
            <div class="title">King Kunta</div>
            <div class="artist">Kendrick Lamar</div>
          </div>
        </div>
      </div>
    </div>4
    <img src="img/jason.png">
  </div>
</div>