JSFiddle - React, Tailwind, and code Playground
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);
});
}
});