JSFiddle - React, Tailwind, and code Playground

HTML

<header>
   <a href="#">
       <span>One</span> <span>100</span> <span>Twenty</span> <span>2000</span>
    </a>
</header>

CSS

a {display: inline-block; padding: 30px;}

JavaScript

(function($){

     $.fn.shuffle = function() {
 
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });
 
        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });
 
        return $(shuffled);
 
    };
 
})(jQuery);


$("header").mouseenter(function(){
	$('span').shuffle();

});