Multiple select filtering with multi-select dropdown - jQuery

I have adapted this Multiple Select Filter to work with this Multiple Select Dropdown so I can get multiple choices in one dropdown.

It seems to work however I noticed a few bugs. The first being you need to select the same sequential order of the dropdown ~ i.e. 1st, 2nd, 3rd choice in order for it to recognize the data attribute of the element being filtered. (see the "size" drop down in the demo below)

DEMO HERE: https://codepen.io/jinch/pen/poRpgzV?editors=0010

*I suspect this has something to do how the RegExp is matching elements so closely to the attribute but I'm not sure how to make this so order doesn't matter.

The other issue and somewhat related is that the selected value does not have to match the attribute exactly. The selection can be partially true and the filter result still show (see the "depth" dropdown in the example) - i.e. you can select 1/2 + 1-1/2 and the results will be the same.

Can the filter be stricter in matching the value but looser in the order those values can be filtered? I hope this makes sense? 🙏

FILTER FUNCTION:

$(".chosen-select").chosen({no_results_text: "Oops, nothing found!"}); 

var config = {
  '.chosen-select': {},
}
for (var selector in config) {
  $(selector).chosen(config[selector]);
}


// If any of the filters change
$('select.filter').change(function() {
    runAllFilters();
});


 function runAllFilters() {
    var filtered = $(".productList li");
    $(filtered).hide();

    // Get all filter values
    var size = $('select.filter#sort-size').val();
    var depth = $('select.filter#sort-depth').val();

    // Filter based on all of them 
    filtered = filtered.filter(function() {
     return RegExp(size).test($(this).attr("data-size")) &&
            RegExp(depth).test($(this).attr("data-depth"));
    });

    if (filtered.length === 0) {
        $('#noresults').remove();
        $('.productList').append("<p id='noresults'>No Results!</p>");
    } else {
       $('#noresults').remove();
    }

    // Display Them
    filtered.each(function (i) {
        $(this).show();
    });
    
};