jQuery addClass example

Change class name on click in jQuery

HTML

<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">
        Strange Days
    </div>
    <div class="col-md-4 col-sm-12" data-count="1" data-name="Rock Bottom">
        Rock Bottom
    </div>
    <div class="col-md-4 col-sm-12" data-count="1" data-name="Moutain">
        Moutain
    </div>
    <div class="col-md-4 col-sm-12" data-count="3" data-name="Mad Sun">
        Mad Sun
    </div>
    <div class="col-md-4 col-sm-12" data-count="10" data-name="Another Ugly Tune">
        Another Ugly Tune
    </div>
</div>

JavaScript

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).data('name')) < (jQuery(a).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).data('name')) < (jQuery(a).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 (jQuery(b).data('count')) < (jQuery(a).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 (jQuery(b).data('count')) < (jQuery(a).data('count')) ? 1 : -1;    
    }
});