JSFiddle - React, Tailwind, and code Playground

by Oceanity

HTML

<div id="main">
	</div>
	<button id="add">Add</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

CSS

#main{
			height: 500px;
			border: 1px solid blue;
			margin: auto;
		}
		.myimg{
			width: 100px;
			height: 100px;
			border-radius: 20px;
		}
		.div{
			width: 100px;
			height: 100px;
			padding: 0;
			background: lightblue;
			background-position: center center;
			margin: 10px;
			float: left;
			border-radius: 20px;
			border: 1px solid blue;
		}

JavaScript

var imgSources = new Array();
		for(var c = 1; c < 23; c++){
			imgSources.push(c + ".png");
			imgSources.push(c + ".png");
		}
		$('#add').click(function(){
			addElements(44);
			$('#add').attr('disabled', 'true');
		});
		function addElements(times){
			var main = $('#main');
			for(j = 1; j <= times; j++){
				var div = $("<div>");
				var img = $("<img>");
                img.attr('src', getImage());
                img.attr('width', '100');
                img.attr('height', '100');

				img.click(function(event){
                    var myImage = $(this);
                    // var attr = $(this).attr('src');
                    // if(typeof attr == typeof undefined){
                    // }else{
                    // 	myImage.slideUp("slow");
                    // }
                    $(this).slideUp();
                    event.stopPropagation();
                });
				div.click(function(){
					$(this).children('img').slideDown();
				});
				div.addClass('div');
				div.append(img);
				img.addClass('myimg');
				main.append(div);
				img.slideUp('fast');
			}       
		}
		var counter;
		function getImage(){
			var rand = Math.floor(Math.random() * imgSources.length);
			var str = imgSources[rand];
            imgSources.splice(rand,1);
			return str;
		}