JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<button>Click to pick X elements at random:</button>
<input type="text" size="3" value="3" />
CSS
li {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: beige;
margin: 10px;
border: 2px grey dotted;
}
.selected {
background: tan;
border: 2px red solid;
}
JavaScript
function shuffle(array) {
var m = array.length, t, i;
// While there remain elements to shuffle…
while (m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
$(function() {
$("button").click(function() {
var $all = $("li").removeClass("selected");
$(shuffle($all).slice(0, $("input").val())).addClass("selected");
});
});