JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<ul class="drop-down" id="priceSort"><li><a href="#" class="link-sort-list asc">صعودی</a></li><li><a href="#" class="link-sort-list desc">نزولی</a></li></ul>
<p> </p>
<div class="row" id="sort-list">
<div class="product-box" price="73100">73100</div><div class="product-box" price="79550">79550</div><div class="product-box" price="180600">180600</div><div class="product-box" price="180600">180600</div><div class="product-box" price="23650">23650</div><div class="product-box" price="19350">19350</div><div class="product-box" price="19350">19350</div><div class="product-box" price="47300">47300</div><div class="product-box" price="19350">19350</div><div class="product-box" price="19350">19350</div><div class="product-box" price="62350">62350</div><div class="product-box" price="25800">25800</div><div class="product-box" price="47300">47300</div><div class="product-box" price="83850">83850</div><div class="product-box" price="19350">19350</div><div class="product-box" price="25800">25800</div><div class="product-box" price="36550">36550</div><div class="product-box" price="17200">17200</div><div class="product-box" price="25800">25800</div><div class="product-box" price="40850">40850</div><div class="product-box" price="30100">30100</div><div class="product-box" price="19350">19350</div><div class="product-box" price="19350">19350</div><div class="product-box" price="19350">19350</div><div class="product-box" price="36550">36550</div><div class="product-box" price="19350">19350</div><div class="product-box" price="19350">19350</div><div class="product-box" price="23650">23650</div><div class="product-box" price="58050">58050</div><div class="product-box" price="23650">23650</div><div class="product-box" price="17200">17200</div><div class="product-box" price="19350">19350</div><div class="product-box" price="25800">25800</div><div class="product-box" price="19350">19350</div><div class="product-box" price="19350">19350</div><div class="product-box"...

JavaScript

$(".link-sort-list").on("click",function(e){
var $this = $(this);
var $list = $('#sort-list');
var $productList = $('div.product-box',$list);
var order = $this.hasClass('asc');
console.log(order);
$productList.sort(function(a, b){
    var keyA = $(a).attr("price");
    var keyB = $(b).attr("price");
        return order ? (parseInt(keyA) - parseInt(keyB)) : (parseInt(keyB) - parseInt(keyA));
});
$.each($productList, function(index, row){
    $list.append(row);
});
e.preventDefault();
});