JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<div class="shuffledv">
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
</div>
<div class="shuffledv">
<div id="4">4</div>
<div id="5">5</div>
<div id="6">6</div>
</div>
<button id='go'>shuffle</button>

CSS

.shuffledv{ padding: 10px; background-color:#eee;}

JavaScript

$(document).ready(function(){
    $("#go").bind('click', shuffle);        
    function shuffle(){
        $(".shuffledv").each(function(){
            var divs = $(this).find('div');
            for(var i = 0; i < divs.length; i++) $(divs[i]).remove();            
            //the fisher yates algorithm, from http://stackoverflow.com/questions/2450954/how-to-randomize-a-javascript-array
            var i = divs.length;
            if ( i == 0 ) return false;
            while ( --i ) {
               var j = Math.floor( Math.random() * ( i + 1 ) );
               var tempi = divs[i];
               var tempj = divs[j];
               divs[i] = tempj;
               divs[j] = tempi;
             }
            for(var i = 0; i < divs.length; i++) $(divs[i]).appendTo(this);
        });                    
    }
});