JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.8/css/lightgallery.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.8/js/lightgallery-all.min.js"></script>
<div id="appendnewcontainer"> Click me To make new album</div>
<div id="fotoappendarea"></div>

CSS

#fotoappendarea {
  box-sizing: border-box;
  display: inline-block;
  background-color: #fff;
  border-radius: 7px;
}
.hid{display: none;}
.blk{display:block;}
.siz{width:100px;height:100px;}

JavaScript

$(document).ready(function() {
	var imagesarray = [
		"http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg",
		"http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg",
		"http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg",
		"http://i765.photobucket.com/albums/xx291/just-meller/national%20geografic/Birds-national-geographic-6873734-1600-1200.jpg",
		"http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg"
	];

	var hiddenimages,albumcover,photos,dispalyimage;

for(var i =0;i<=imagesarray.length;i++){
    hiddenimages += '<a class"hid" href="'+imagesarray[i]+'"><img src="'+imagesarray[i]+'"></a>';
    
displayimage='<a class"blk siz" href="'+imagesarray[0]+'"><img src="'+imagesarray[0]+' "style="display:block"></a>';
}
var elementCreator= "<span class='imagecontainer'>"+dispalyimage+" dislpay "+hiddenimages+"</span>";
$("#fotoappendarea").append(elementCreator);
$(".imagecontainer").lightGallery();

});