JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
</div>
CSS
.sas {
width:50px;
height:50px;
border:red solid 3px;
background-color:yellow;
display:inline-block
}
JavaScript
var pics =[
'http://i.imgur.com/1oT2ZpOb.jpg',
'http://i.imgur.com/XsViuLib.jpg',
'http://i.imgur.com/aTDTI8Eb.jpg',
'http://i.imgur.com/4kLvWOdb.jpg'
]
var cont= document.getElementById('container');
var each = function(arr, i) {
if (i === undefined) {
i = 0;
}
if (i < arr.length) {
var img = new Image();
img.onload = function() {
var pic = document.createElement('div');
pic.className = 'sas';
pic.addEventListener('click',function(){alert('mda ' + i)});
cont.appendChild(pic);
each(arr, i + 1);
};
img.src = arr[i];
}
};
each(pics);