JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
<script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox-2.6.min.js"></script>
<div id="imageGal"></div>

JavaScript

var imageArray =[
"image-1.jpg",
"image-2.jpg",
"image-3.jpg",
"image-4.jpg",
"image-5.jpg"
];

    function assignUrl(img_num)
    {
        return "http://lokeshdhakar.com/projects/lightbox2/img/demopage/" + imageArray[img_num];
    }
    
    $(function() {
        for (var i = 0; i < imageArray.length; i++){
            var div = $("<a/>").attr("href",assignUrl(i)).attr("data-lightbox","imageGallery");
            div.append($("<img/>").attr("src",assignUrl(i)).attr("width","20%").attr("height","20%"));
            console.log($);
            $("#imageGal").append(div);    
        }
        $('a[rel="lightbox"]').lightBox();
    });