Animate.css shake effect not working every time

I'm making a Twitch Streamer application, that pulls some data using Twitch API, for a predetermined set of streamers.

I have three buttons to select all/online/offline channels, and I am looking to add the animated shake effect to all these buttons.

On my first attempt, I had a simple if/else check in place to make the shake work correctly - detect if the animated shake class already exists, if so, remove it, and then add it again. Else, just add it.

That didn't work. I found an answer here on SO that said it won't work that way because the addClass and removeClass occur so fast that the DOM doesn't have time to catch up.

I then used a queue with an anonymous function to add the class back after inducing a slight delay after the removeClass -

if ($(this).hasClass("animated shake")) {
            $(this).removeClass("animated shake").delay(50).queue(
                function() {
                    $(this).addClass("animated shake");
                });
            //$(this).addClass("animated shake");
        } else {
            $(this).addClass("animated shake");
        }

Now, the shake effect works like 90% of the time, but if you keep switching back and forth between online/offline channels, there will be cases in between where the shake doesn't work.

Here's the app on Codepen.

I'd appreciate any help as to why it doesn't work every single time.

Note - The shake effect is on the online/offline buttons only, for now.