JSFiddle - React, Tailwind, and code Playground

by Atul Nar

HTML

<div id="wrapper">
 <div id="pr-1">1</div>     
 <div id="pr-2">2</div>
 <div id="pr-3">3</div>
  <div id="pr-4">4</div>
   <div id="pr-5">5</div>
    <div id="pr-6">6</div> 
     <div id="pr-7">7</div>
     <div id="pr-8">8</div>
     <div id="pr-9"></div>
     <div id="pr-10"></div>
  </div>
<input type="button" id="txtRandom" value="Randome"/>

CSS

#wrapper {
background-color: #fe8181;
width: 300px;
height: 510px;
padding: 5px;
} 
#pr-1, #pr-2, #pr-3, #pr-4, #pr-5, #pr-6, #pr-7, #pr-8, #pr-9, #pr-10
{
background-color: #fff;
float: left;
height: 70px;
margin-bottom: 3px;
margin-right: 3px;
width: 72px;   
}

JavaScript

var limit = 5,
    amount = 5,
    lower_bound = 1,
    upper_bound = 10,
    unique_random_numbers = [];

if (amount > limit) limit = amount; //Infinite loop if you want more unique
                                    //Natural numbers than existemt in a
                                    // given range
while (unique_random_numbers.length < limit) {
    var random_number = Math.round(Math.random()*(upper_bound - lower_bound) + lower_bound);
    if (unique_random_numbers.indexOf(random_number) == -1) { 
        // Yay! new random number
        unique_random_numbers.push( random_number );
    }
}

var urllist=["http://upload.wikimedia.org/wikipedia/commons/c/cf/Eenbruinigherfstblad.jpg","http://upload.wikimedia.org/wikipedia/en/5/57/Canadian_maple_leaf_2.jpg","http://upload.wikimedia.org/wikipedia/commons/9/9d/Pear_Leaf.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"];
//alert(unique_random_numbers);

for(var i = 0; i < unique_random_numbers.length; i++) {
    var a="<img width='45px' height='45px' id='"+(i+1)+"' src='"+urllist[unique_random_numbers[i]]+"' alt='image"+(unique_random_numbers[i])+"'/>";
    
  //  alert(a);
    
    $("#pr-"+unique_random_numbers[i]).html("");
    $("#pr-"+unique_random_numbers[i]).append(""+a);
    
}