JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn_shuffle" id="shuffle">Shuffle</button>
<button class="btn_sort">Sort</button>
<div id="shuffle">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
    <div class="card">8</div>
    <div class="card">9</div>
</div>

CSS

#shuffle > div {
    float: left;
    line-height: 30px;
    width: 50px;
    text-align: center;
    background-color: steelblue;
    color: #fff;
    border-radius: 4px;
    margin: 3px;
}
#shuffle {
    max-width: 360px;
}

JavaScript

$(".btn_shuffle").click(function () {
        var cardNumbers = [];
        $('.card').each(function () {
            cardNumbers.push(this.innerHTML);
        });
        var theLength = cardNumbers.length-1;
        var toSwap ;
        var temp;
        console.log(cardNumbers);
        for(i=theLength; i>0; i--){
            toSwap = Math.floor(Math.random()*i);
            temp = cardNumbers[i];
            cardNumbers[i] = cardNumbers[toSwap];
            cardNumbers[toSwap]=temp;
        }
        console.log(cardNumbers);

    });