JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="drop-down" id="priceSort"><li><a href="#" class="link-sort-list asc">ASC</a></li><li><a href="#" class="link-sort-list desc">DESC</a></li></ul>
<p> </p>
<div class="row" id="sort-list">
<div class="product-box" price="1">1</div>
<div class="product-box" price="2">2</div>
<div class="product-box" price="3">3</div>
<div class="product-box" price="4">4</div>
<div class="product-box" price="5">5</div>
<div class="product-box" price="6">6</div>
<div class="product-box" price="7">7</div>
<div class="product-box" price="8">8</div>
<div class="product-box" price="9">9</div>
</div>

JavaScript

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