JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class="imagecontiner">
    <a href="http://i765.photobucket.com/albums/xx291/just-meller/national%20geografic/Birds-national-geographic-6873734-1600-1200.jpg">
      <img class="red" src="http://i765.photobucket.com/albums/xx291/just-meller/national%20geografic/Birds-national-geographic-6873734-1600-1200.jpg" />
   </a>
   </div>

CSS

#fotoappendarea {
  box-sizing: border-box;
  display: inline-block;
  width: 550px;
  min-height: 100px;
  max-height: 450px;
  margin: 10px 0px;
  padding: 5px;
  background-color: #fff;
  border-radius: 7px;
}

JavaScript

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

  var hiddenimages = "",
    albumcover;
  /*for (var i = 0; i < imagesarray.length; i++) {
      imagepath = imagesarray[i];
      hiddenimages += "<a class='hidimage' href=" + imagepath + "><img src=" + imagepath + "/></a>"
    }*/

    /*var glryPostContainer = "<span class='container'>" +
      "<span class='imagecontiner'>" +
      "<a class='dfed' href=" + imagesarray[1] + ">" +
      "<img src='" + imagesarray[1] + "' class='  "</a>" +
      "</span>" +
      "</span>";*/
      var glrypost ='<div class="imagecontiner">'+
    '<a href="http://i765.photobucket.com/albums/xx291/just-meller/national%20geografic/Birds-national-geographic-6873734-1600-1200.jpg">'+
      '<img class="red" src="http://i765.photobucket.com/albums/xx291/just-meller/national%20geografic/Birds-national-geographic-6873734-1600-1200.jpg" />'+
   ' </a>'+
  '</div>';
  $(".imagecontiner").lightGallery();
});