JSFiddle - React, Tailwind, and code Playground

HTML

<div id="virtual-keypad" class="vk">
    <button class="digit">0</button>
    <button class="digit">1</button>
    <button class="digit">2</button>
    <button class="digit">3</button>
    <button class="digit">4</button>
    <button class="digit">5</button>
    <button class="digit">6</button>
    <button class="digit">7</button>
    <button class="digit">8</button>
    <button class="digit">*</button>
    <button class="digit">9</button>
    <button class="digit">#</button>
    <button id="shuffle" class="fill">Shuffle</button>
</div>

CSS

.vk {
    width: 145px;
    font-size: 12px;
}

.vk button {
    width: 40px;
    padding: 8px 0px;
    margin: 5px 5px 5px 0px;
    text-align: center;
}

.vk button.fill {
    width: 130px;
}

JavaScript

var shuffleKeys = function() {
    $("#virtual-keypad > .digit").sort(function(a, b) {
        return Math.random() - 0.5;
    }).prependTo($("#virtual-keypad"));
};

shuffleKeys();

$("#shuffle").click(function() {
    shuffleKeys();
});