JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapperToBindTo">
    <div id='changers'>
        <div class="changerthing">hi</div> <span class="changerthing">Woopy</span>
 <span class="changerthing">Woopy</span>

    </div>
    <div id="specialSpans">
<span class="special">I am so special</span>

<span class="special">I am so special</span>

        <span
        class="special">I am so special</span>
<span class="special">I am so special</span>

            <span
            class="special">I am so special</span>
    </div>
    <ul id="unfriendly">
        <li class="special">one more special</li>
        <li class="special">one more special</li>
        <li class="special">one more special</li>
        <li class="special">one more special</li>
        <li class="special">one more special</li>
    </ul>
    <ul class="friendly">
        <li class="specialalso">one more</li>
        <li class="specialalso">one more</li>
        <li class="specialalso">one more</li>
        <li class="specialalso">one more</li>
        <li class="specialalso">one more</li>
    </ul>
        <ul class="friendly">
        <li class="specialalso">one more again</li>
        <li class="specialalso">one more again</li>
    
    </ul>
</div>
<div id="results">empty</div>
<button id='wackFriendly'>wack friendly</button>

CSS

.new{background-color:lime;}
.myfocus{background-color:pink;}

JavaScript

String.prototype.trim = function () {
    return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
};

function trackChanges(me, myscope, tracker) {
    /* Parameters:
     * me is the item
     * myscope item scope for count - bascially the root of the "group" in scope
     * tracker holds the counts stuff to keep track of length changes
     */
    //assumed first class here - if not would need to manage that
    var thisclass = $(me).attr('class');
    thisclass = thisclass.trim().split(/[\s,]+/)[0];

    //tag to my element if no tracker and no scope passed
    var thisTracker = tracker ? tracker : (myscope ? myscope : '#results'); //where to store the data
    thisTracker = thisTracker instanceof jQuery ? thisTracker : $(thisTracker); //ensure we have jQuery object

    var emptyTrack = {};
    emptyTrack = {
        myclass: thisclass,
        count: 0
    };

    var counter = thisTracker.data('countKeeper.' + thisclass) ? thisTracker.data('countKeeper.' + thisclass) : emptyTrack;

    //code just to show what is going on
    var show = $('#results');
    show.text('');

    var mycount = {};
    mycount = {
        myclass: thisclass,
        count: $("." + thisclass, myscope).length
    };

     //code just to show what is going on
    show.text(show.text() + "Prior: " + counter.myclass + " : " + counter.count + " || Detected myclass: " + mycount.myclass + " mycount : " + mycount.count);

    $('.' + thisclass).removeClass('new myfocus');
    if (mycount.count === counter.count) {
        $(me).addClass('myfocus');
    } else {
        thisTracker.data('countKeeper.' + thisclass, mycount);
        $(me).addClass('new');
    }
}

$(document).on('specialEvent', '.special, .changerthing, .friendly>.specialalso', function () {
    trackChanges(this, $(this).parent(), $(this).parent());
});
$('#wrapperToBindTo').on('click wacked', '.changers,.special,.changerthing', function () {
    $(this).trigger('specialEvent');
});
$('.friendly').on('click',...