JSFiddle - React, Tailwind, and code Playground
HTML
<div class="Pictures" id="ReviewPictures_0">
<div class="Thumbs">
<div class="Thumb" onClick="ViewThumb(1,1)">
<img src="http://www.smakelynn.com/images/pictures/pic1.png" id="Review_1_Picture_1" border="0" title="Voorgerecht">
</div>
<div class="Thumb" onClick="ViewThumb(1,2)">
<img src="http://www.smakelynn.com/images/pictures/pic2.png" id="Review_1_Picture_2" border="0" title="Hoofdgerecht">
</div>
<div class="Thumb" onClick="ViewThumb(1,3)">
<img src="http://www.smakelynn.com/images/pictures/pic3.png" id="Review_1_Picture_3" border="0" title="Dessert">
</div>
<div class="Thumb" onClick="ViewThumb(1,4)">
<img src="http://www.smakelynn.com/images/pictures/pic4.png" id="Review_1_Picture_4" border="0" title="Tafeldekking">
</div>
<div class="Thumb" onClick="ViewThumb(1,5)">
<img src="http://www.smakelynn.com/images/pictures/pic5.png" id="Review_1_Picture_5" border="0" title="Sfeerbeeld">
</div>
</div>
</div>
CSS
.Thumb {
display: inline-block;
margin-bottom: 5px;
width: 15%;
cursor: hand;
cursor: pointer;
zoom: 1;
*display: inline;
}
.Thumbs:after {
content: "";
width: 100%;
display: inline-block;
zoom: 1;
*display: inline;
}
.Thumb img {
width: 100%;
}
JavaScript
function createElements(parentID) {
var picturesDIV = document.createElement('div');
picturesDIV.id = 'ReviewPictures_1';
picturesDIV.className = 'Pictures';
var thumbsDIV = document.createElement('div');
thumbsDIV.className = 'Thumbs';
for(var i=1; i <= 5; i++) {
var pictureID = i;
var thumbDIV = document.createElement('div');
thumbDIV.className = 'Thumb';
var thumbIMG = document.createElement('img');
thumbIMG.id = 'Review_' + i + '_Picture_' + i;
thumbIMG.src = 'http://www.smakelynn.com/images/pictures/pic' + i + '.png';
thumbIMG.border = '0';
thumbDIV.appendChild(thumbIMG);
thumbsDIV.appendChild(thumbDIV);
}
picturesDIV.appendChild(thumbsDIV);
document.getElementById(parentID).appendChild(picturesDIV);
}
$(document).ready(function(){
createElements('ReviewPictures_0');
});