JSFiddle - React, Tailwind, and code Playground

by reporter

HTML

<!-- source: http://stackoverflow.com/questions/12313928/jquery-random-shuffle-content-amongst-multiple-columns -->
<div class="info-blocks-container clearfix">
    <div id="col1" style="margin-top: 5px;margin-bottom: 5px;border:1px solid blue;width: 200px;">
        <div class="info-block">.1..</div>
        <div class="info-block">.2..</div>
        <div class="info-block">.3..</div>
    </div>
    <div id="col2" style="margin-top: 5px;margin-bottom: 5px;border:1px solid red;width: 200px;">
        <div class="info-block">.4..</div>
        <div class="info-block">..5.</div>
    </div>
    <div id="col3" style="margin-top: 5px;margin-bottom: 5px;border:1px solid green;width: 200px;">
        <div class="info-block">..6.</div>
        <div class="info-block">.7..</div>
        <div class="info-block">..8.</div>
    </div>
</div>

JavaScript

var columnsCollection = new Array();
var columnsObjectsNumber = new Array();
 
reorder();
function reorder() {
    $(".info-blocks-container").find("DIV[id^='col']").each(function()
    {           
        var tmp = $(this).children();
        //Store the numbers of contained children 
        columnsObjectsNumber.push($(tmp).size());
        $(tmp).each(function()
        {
            //transfers current child object to our global store place 
            columnsCollection.push($(this));
            //and removed it
            $(this).remove();
        });
    });
    
    var restartIndex = 0;
    $(".info-blocks-container").find("DIV[id^='col']").each(function()
    { 
        //Contains the random generated number
        var x;
        //Contains the current object with Id 'col..'
        var temp = $(this);
        for (var i = 0; i < columnsObjectsNumber[restartIndex]; i++)
        {
            /*
              Generates a random number.
             The maximum limit is the current length from our global store place
            */
            x = Math.floor(Math.random() * columnsCollection.length);
            //Appends the object to the current object with Id 'col..'
            $(temp).append(columnsCollection[x]);
            //Removes the appended element from global store place 
            columnsCollection.splice(x,1);
         }
        restartIndex++;
    });   
}