JSFiddle - React, Tailwind, and code Playground

HTML

<p class='foo'>Foo</p>
<p class='bar'>Bar</p>

<h3>Log:</h3>
<ol id='log'></ol>

CSS

h3 { margin-top: 1em; font-weight: bold; }
li { margin-top: 1em; }

JavaScript

var isFoo = function(e) { return $(e).hasClass('foo'); },

    isBar = function(e) { return $(e).hasClass('foo'); },

    $log = $('#log'),

    log = function(message) {
        $log.append('<li>' + message + '</li>');
    };

$.extend($.expr[':'],  { foo: isFoo });

var sub = $.sub();
$.extend(sub.expr[':'], { bar: isBar });

function tryToFilter(filter, $, $name) {
    try {
        $('p:' + filter).each(function(i, p) {
            log($(p).text() + ' has class ' +
                filter + ' (from ' + $name + ')'
               );
        });
    } catch(e) {
        log('Could not filter on ' + filter +
            'in ' + $name + ':<br/>' + e.toString()
           );
    }
}

tryToFilter('foo', $,   '$');
tryToFilter('foo', sub, 'sub');
tryToFilter('bar', sub, 'sub');