JSFiddle - React, Tailwind, and code Playground

by Fu-Ching Hsiao

HTML

<div class="image-box">1</div>
	<div class="image-box">2</div>
	<div class="image-box">3</div>
	<div class="image-box">4</div>
	<div class="image-box">5</div>

	<div class="image-box">6</div>
	<div class="image-box">7</div>
	<div class="image-box">8</div>
	<div class="image-box">9</div>
	<div class="image-box">10</div>

	<div class="image-box">11</div>
	<div class="image-box">12</div>
	<div class="image-box">13</div>
	<div class="image-box">14</div>

JavaScript

$(document).ready(function() {
		assign_id();
	});
	function assign_id() {
		var numberOfDiv = $('.image-box').length;
		var listOfRandomNumber = myFunction(numberOfDiv);
		console.log(listOfRandomNumber);
		$('.image-box').each(function(i, obj) {
			$(this).attr("id",listOfRandomNumber[i]);
		});
	};

	function myFunction(numberOfDiv) {
		for (var i = 1, ar = []; i < numberOfDiv +1 ; i++) {
			ar[i] = i;
		}
		ar.sort(function() {
			return Math.random() - 0.5;
		});
		return ar;
	};