JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://93.157.0.141/~oppersfi/wp-content/themes/oppersfi/resources/scripts/base64.js"></script>
<ul class="product-order-options">
    <li id="orderby-date-desc" class="product-order-option" data-order="DESC" data-orderby="date">
        Nieuw binnengekomen
    </li>
    <li id="orderby-price-asc" class="product-order-option" data-order="ASC" data-orderby="price">
        Prijs, van laag naar hoog
    </li>
    <li id="orderby-price-desc" class="product-order-option" data-order="DESC" data-orderby="price">
        Prijs, van hoog naar laag
    </li>
    <li id="orderby-quality-desc" class="product-order-option" data-order="DESC" data-orderby="quality">
        Kwaliteit, van hoog naar laag
    </li>
    <li id="orderby-quality-asc" class="product-order-option" data-order="ASC" data-orderby="quality">
        Kwaliteit, van laag naar hoog
    </li>
</ul>

CSS

.product-order-options {
    
}

.product-order-option {
    color: #888;
}

.product-order-option.is-selected {
    color: red;
}

JavaScript

// Restore filter form on pageload
function restoreFilters (query_string) {
    
    console.log('...start restore...');

    var pairs = query_string.split('&');
    var order = "";
    var orderby = "";

    $.each(pairs, function (i, pair) {

        pair = pair.split('=');

        // Order
        if (pair[0] == 'order') {
            order = pair[1];
            $('#order').val(pair[1]);
        }
        
        // Orderby
        else if (pair[0] == 'orderby') {
            orderby = pair[1];
            $('#orderby').val(pair[1]);
        }
        
        // Other filer types left out in this example
    });

    // Remove default selected orderby
    $('.product-order-option.is-selected').removeClass('is-selected');
    
    // Set new selected orderby
    $('#orderby-'+orderby+'-'+order.toLowerCase()).addClass('is-selected');
    
    console.log('...done!');
}

// Execute when document is ready
$(document).ready(function () {
    
    console.log('Start...');
   
    // Get query string
    query_string = Base64Url.decode('cHJpY2VfbWluPTImcHJpY2VfbWF4PTUwJm9yZGVyPURFU0Mmb3JkZXJieT1wcmljZQ');
    if (query_string.length > 0) {
        
        console.log('...string found...');
        
        // Restore filterform
        restoreFilters(query_string);
    }
});