Dynamically generated lightslder and lightgallery

Question

I have a news feed page where different posts show their images in a combination of lightslider and lightgallery. So far I have made it work for hardcoded posts, but failing to do the same for posts that are dynamically generated.

Here is the code I'm using for combining lightgallery and lightslider

$('.lightSlider').each(function (index) {
    $(this).lightSlider({
        gallery: true,
        item: 1,
        loop: true,
        slideMargin: 0,
        thumbItem: 9,
        onBeforeSlide: function (el) {
            $('#counter' + index).text(el.getCurrentSlideCount());
        },
        onSliderLoad: function(el) {
            el.lightGallery({
                selector: '.lightgallery .lslide'
            });
        }
    });
  });

Here is the code I am playing with for combining lightslider and lightgallery in dynamically generated posts

HTML:

<button type="button" id="appendnewcontainer">Click me To create new slider</button>
<div id="fotoappendarea">

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;

            $("#appendnewcontainer").click(function() {

                $("<span />", {
                    class : "container",
                    appendTo : $("#fotoappendarea"),
                    append : $("<span />", {
                        class : "imagecontiner",
                        html : "<a class='dfed' href=" + imagesarray[1] + "><img src='" + imagesarray[1] + "' class='_34'/></a>"
                    }).lightGallery()
                });

            });
        });

Answer 1

Solved! Here is how I did it

HTML:

<button type="button" class="btn btn-danger" id="appendnewcontainer">Click me To create new slider</button>
<div id="fotoappendarea">

JavaScript:

$(document).ready(function(){
        getPost(0);

        var imagesarray = [
            "https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg",
            "https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg?auto=compress&cs=tinysrgb&h=350"
        ];

        var hiddenimages = "",
                albumcover;

        $("#appendnewcontainer").click(function() {
            $("#fotoappendarea").append("<div class='lightgallery my-5'><ul class= 'lightSlider'><li data-thumb=" + imagesarray[0] + " data-src=" + imagesarray[0] + "><img src='" + imagesarray[0] + "' class='_34'/></li><li data-thumb=" + imagesarray[1] + " data-src=" + imagesarray[1] + "><img src='" + imagesarray[1] + "' class='_34'/></li></ul></div>");
            $('.lightSlider:last').lightSlider({
                    gallery: true,
                    item: 1,
                    loop: true,
                    slideMargin: 0,
                    thumbItem: 9,
                    onBeforeSlide: function (el) {
                        $('#counter' + index).text(el.getCurrentSlideCount());
                    },
                    onSliderLoad: function(el) {
                        el.lightGallery({
                            selector: '.lightgallery .lslide'
                        });
                    }
                });
            });

    })

Will add the jsfiddle later