내 목록 정렬이 jQuery에서 제대로 작동하지 않습니다.

jQuery('body').on('click', '.sort #js-az', function() {
  jQuery(".js-songs-sortable > div").sort(sort_li).appendTo('.js-songs-sortable');

  function sort_li(a, b) {
    return (jQuery(b).attr('data-name')) < (jQuery(a).attr('data-name')) ? 1 : -1;
  }
});

jQuery('body').on('click', '.sort #js-za', function() {
  jQuery(".js-songs-sortable > div").sort(sort_li).appendTo('.js-songs-sortable');

  function sort_li(b, a) {
    return (jQuery(b).attr('data-name')) < (jQuery(a).attr('data-name')) ? 1 : -1;
  }
});

jQuery('body').on('click', '.sort #js-1-10', function() {
  jQuery(".js-songs-sortable > div").sort(sort_li).appendTo('.js-songs-sortable');

  function sort_li(a, b) {
    return (parseInt(jQuery(b).attr('data-count'))) < parseInt((jQuery(a).attr('data-count'))) ? 1 : -1;
  }
});

jQuery('body').on('click', '.sort #js-10-1', function() {
  jQuery(".js-songs-sortable > div").sort(sort_li).appendTo('.js-songs-sortable');

  function sort_li(b, a) {
    return parseInt(jQuery(b).attr('data-count')) < parseInt(jQuery(a).attr('data-count')) ? 1 : -1;
  }
});

.sort {
  border-radius: 5px;
  background-color: #eee;
  display: inline-block;
  margin-bottom: 1rem;
}

.sort span {
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-block;
}

.sort span:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.row>div {
  padding: 0.5rem;
}

.row>div::after {
  content: "data-count= " attr(data-count) " data-name= " attr(data-name);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sort">
  <span class="sort__item" id="js-az">A-Z</span>
  <span class="sort__item" id="js-za">Z-A</span>
  <span class="sort__item" id="js-1-10">1-10</span>
  <span class="sort__item" id="js-10-1">10-1</span>
</div>

<div class="row js-songs-sortable" id="all-song-list">
  <div class="col-md-4 col-sm-12" data-count="5" data-name="Strange Days">

  </div>
  <div class="col-md-4 col-sm-12" data-count="1" data-name="Rock Bottom">

  </div>
  <div class="col-md-4 col-sm-12" data-count="1" data-name="Moutain">

  </div>
  <div class="col-md-4 col-sm-12" data-count="3" data-name="Mad Sun">

  </div>
  <div class="col-md-4 col-sm-12" data-count="10" data-name="Another Ugly Tune">

  </div>
</div>