Сортировать товары по цене JS + Laravel

Question

Я пытаюсь отсортировать товары в моем интернет-магазине по цене. Я не понимаю, в чем проблема ... Это не работает правильно.

PRODUCTS.BLADE.PHP

<div class="sortProdText">
                <button id="sort-asc">Sort By Low Price </button>
                <button id="sort-desc">Sort By High Price </button>
            </div>

ЭТИ ПРОДУКТЫ ВИД:

<div class="row" id="sortBy">
           @foreach ($products as $data)
           <!-- Single Product -->
           <div class="col-12 col-sm-6 col-lg-4" data-price='{{$data['price']}}' data-name='{{$data['description']}}'>
               <div class="product-wrapper">
                   <a href="{{url('shop').'/'.$categorie_url.'/'.$data['product_url']}}">
                       <div class="single-product-wrapper" >
                           <!-- Product Image -->
                           <div class="product-img custom" >
                               <img src="{{url('img/'.$data['img'])}}" alt="">
                               <!-- Hover Thumb -->

                               <!-- Product Badge -->
                               <div class="product-badge offer-badge">
                                   <span>-30%</span>
                               </div>
                               <!-- Favourite -->
                               <div class="product-favourite">
                                   <a href="#" class="favme fa fa-heart"></a>
                               </div>
                           </div>
                           <!-- Add to Cart -->
                           <div class="add-to-cart">
                               <a href="#" class="btn btn-light add-to-cart-btn" data-id="{{$data['id']}}">Add to Cart</a>                      
                               <a href="{{url('shop').'/'.$categorie_url.'/'.$data['product_url']}}" class="btn btn-secondary more_details_btn">More Details</a>
                           </div>

                           <!-- Product Description -->
                           <div class="product-description custom" >
                               <span>{{$data['description']}}</span>
                               <p class="product-price" ><span class="old-price">$800.00</span>{{$data['price']}}$</p>
                           </div>
                       </div> 
                   </a>
               </div>
           </div>
           @endforeach
       </div>

JS CODE: я думаю здесь replacedNode проблема.

document.querySelector('#sort-asc').onclick = mySort;
document.querySelector('#sort-desc').onclick = mySortDesc;

function mySort() {
    let nav = document.querySelector('#sortBy');
    for (let i = 0; i < nav.children.length; i++) {
        for (let j = i; j < nav.children.length; j++) {
            if (+nav.children[i].getAttribute('data-price') > +nav.children[j].getAttribute('data-price')) {
                replacedNode = nav.replaceChild(nav.children[j], nav.children[i]);
                insertAfter(replacedNode, nav.children[i]);
            }
        }
    }
}
function mySortDesc() {
    let nav = document.querySelector('#sortBy');
    for (let i = 0; i < nav.children.length; i++) {
        for (let j = i; j < nav.children.length; j++) {
            if (+nav.children[i].getAttribute('data-price') < +nav.children[j].getAttribute('data-price')) {
                replacedNode = nav.replaceChild(nav.children[j], nav.children[i]);
                insertAfter(replacedNode, nav.children[i]);
            }
        }
    }
}