JSFiddle - React, Tailwind, and code Playground

by Sam Korn

HTML

<div id="one">
    <div>
        <p>Sample text 1</p>
    </div>
    <div>
        <p>Sample text 2</p>
    </div>
    <div>
        <p>Sample text 3</p>
    </div>
    <div>
        <p>Sample text 4</p>
    </div>
</div>
<div id="two">
    <div>
        <p>Sample text 5</p>
    </div>
    <div>
        <p>Sample text 6</p>
    </div>
    <div>
        <p>Sample text 7</p>
    </div>
    <div>
        <p>Sample text 8</p>
    </div>
</div>

CSS

#one > div {
    background: lightgreen;
    margin-bottom: 1em;
}
#one > div > div {
    background: lightyellow;
    margin-left: 2em;
}

JavaScript

// shuffle the first elements
var one = $('#one'),
    divs = shuffle($('#one div').get());

$.each(divs, function() {
    one.append(this);
});

// insert the second elements in order
$('#two div').each(function(idx) {
    $('#one > div').eq(idx).append(this);
});

function shuffle(array) {
    var currentIndex = array.length,
        temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}