JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

    <div class="order">
    <a class="sortbyprice">Sort by Price</a>
    <a class="sortbypax">Sort by Pax</a>
        
    </div>


    <div class="results">
    
        <div class="listings">
        <span>$ 326</span>
        <div class="pax tooltip" title="Pax (number of ppl)">16</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie consequat erat, sit amet blandit nulla placerat vel</p>
        </div>

        <div class="listings">
        <span>$ 950</span>
        <div class="pax tooltip" title="Pax (number of ppl)">23</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie consequat erat, sit amet blandit nulla placerat vel</p>
        </div>

        <div class="listings">
        <span>$ 119</span>
        <div class="pax tooltip" title="Pax (number of ppl)">67</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie consequat erat, sit amet blandit nulla placerat vel</p>
        </div>
   
    </div>
    
    
    
</div>

CSS

.order { display:block; padding:30px; background:#333; margin-bottom:30px; }
.order a { width:25%; float:left; text-align:center; color:#fff; cursor:pointer }
.order:after { clear:both; content:""; display:block; width:100% }

.listings { float:left; width:31.3333%; background:#eee; margin:1%; padding:2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.listings span { font-size:30px; text-align:center; display:block; margin-bottom:10px }
.listings .pax { font-size:16px; text-align:center; display:block; }
.listings .pax:before { content:"Pax: " }

.listings.alt { width:98% }

JavaScript

// My attempt to utilize local storage for the sort by PRICE only

if (localStorage.getItem('sortby') == 'price') {
	
	$(function() {
    ratingAscending = true;
    var sorted = $('.listings').sort(function(a,b) {
        return (priceAscending ==
               (convertToNumber($(a).find('span').html()) < 
                convertToNumber($(b).find('span').html()))) ? 1 : -1;
    });
    priceAscending = !priceAscending;
    $('.results').append(sorted);
})

}

// this part deals with SORT BY options

var priceAscending = false;
var ratingAscending = true;

$('.container').on('click','.sortbyprice',function(){
    ratingAscending = true;
    var sorted = $('.listings').sort(function(a,b) {
        return (priceAscending ==
               (convertToNumber($(a).find('span').html()) < 
                convertToNumber($(b).find('span').html()))) ? 1 : -1;
    });
    priceAscending = !priceAscending;
    $('.results').append(sorted);
    localStorage.setItem("sortby", "price");
})


$('.container').on('click','.sortbypax',function(){ 
    priceAscending = true;
    var sorted = $('.listings').sort(function(a,b){
        return (ratingAscending ==
               (parseFloat($(a).find('.pax').html()) < 
                parseFloat($(b).find('.pax').html()))) ? 1 : -1;
    });
    ratingAscending = !ratingAscending;

    $('.results').append(sorted);
    localStorage.setItem("sortby", "pax");
});


var convertToNumber = function(value){
     return parseFloat(value.replace('$',''));
}