JSFiddle - React, Tailwind, and code Playground

by Kirby Daysable

HTML

<p>What speed do you need?</p>
<button id="asc">sort by price asd</button>
<button id="desc">sort by price desc</button>
<p>What speed bike do you need?</p>
<select class="filterby">
    <option value="all">
        <h5>See All</h5>
    </option>
    <option value="15">
        <h5>15</h5>
    </option>
    <option value="20">
        <h5>20</h5>
    </option>
    <option value="25">
        <h5>25</h5>
    </option>
    <option value="50">
        <h5>50</h5>
    </option>
    <option value="150">
        <h5>150</h5>
    </option>
    <option value="160">
        <h5>160</h5>
    </option>
</select>
<p>What do you like to watch?</p>
<select class="filterby">
    <option value="all">
        <h5>See all packages</h5>
    </option>
    <option value="showtime">
        <h5>Showtime</h5>
    </option>
    <option value="hbo">
        <h5>HBO</h5>
    </option>
    <option value="cinemax">
        <h5>Cinemax</h5>
    </option>
    <option value="starz">
        <h5>Starz</h5>
    </option>
    <option value="ondemand">
        <h5>On Demand</h5>
    </option>
</select>
<p>Do you want a contract?</p>
<select class="filterby">
    <option value="all">
        <h5>See all deals?</h5>
    </option>
    <option value="contract">
        <h5>Contract</h5>
    </option>
    <option value="nocontract">
        <h5>No Contract</h5>
    </option>
</select>
</ul>
<div class="FilterSorting">
    <div id="FilterContainer">
        <!-- CARD 1 -->
        <li class="ux-offer all ondemand hbo 50 contract">
            <div class="offer">
                <p class="offer-lob">50 mph</p>
                <div class="container">
                    <div class="offer-price">
                        <p class="title">Bike 1</p>
                        <p class="ux-priceoffer"> <span class="ux-priceoffer--currency">$</span>  <span class="ux-priceoffer--dollars">89</span>  <span class="ux-priceoffer--cents">99/mo</span>
 <span class="ux-priceoffer--duration">for 12 mo.</span>

           ...

JavaScript

$("select.filterby").change(function () {
    var filters = $.map($("select.filterby").toArray(), function (e) {
        return $(e).val();
    }).join(".");
    $("div#FilterContainer").find("li.ux-offer").hide();
    $("div#FilterContainer").find("li." + filters).show();
});

function sortByPrice(a, b) {
    return $(a).find('.ux-priceoffer').text() > $(b).find('.ux-priceoffer').text();
}

function sortByPriceDesc(a, b) {
    return $(a).find('.ux-priceoffer').text() < $(b).find('.ux-priceoffer').text();
}

function reorderEl(el) {
    var container = $('.FilterSorting');
    container.html('');
    el.each(function () {
        $(this).appendTo(container);
    });
}
$('#asc').click(function () {
    reorderEl($('.ux-offer').sort(sortByPrice));
});

$('#desc').click(function () {
    reorderEl($('.ux-offer').sort(sortByPriceDesc));
});