JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

CSS

div {
    width:100px;
    height:100px;
    border:1px solid black;
}

JavaScript

var cardDeck = new Array();

function createDeck() {
    for (i = 1; i <= 6; i++) {
        cardDeck.push("card-" + i);
    }
}
createDeck();
var randDeck = cardDeck.sort();
alert(randDeck);

function randomizeDeck() {
    var x = 0;
    $('div').each(function(i){
     if ( i > 5) { 
             
                $(this).addClass(randDeck[x]);
         x++; 
      } else {
        $(this).addClass(randDeck[i]);
    }
    });
}
randomizeDeck();