JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="gallery">
    <li>t</li>
    <li>t</li>
    <li>t</li>
    <li>t</li>
    <li>t</li>
    <li>t</li>
    <li>t</li>
    <li>t</li>
    <li>t</li>
</ul>


<span id="gallery-prev">Previous</span>
<span id="gallery-next">Next</span>

JavaScript

var galleryImages = new Array(
'images/tb_01.jpg',
'images/tb_02.jpg',
'images/tb_03.jpg',
'images/tb_04.jpg',
'images/tb_05.jpg',
'images/tb_06.jpg',
'images/tb_07.jpg',
'images/tb_08.jpg',
'images/tb_09.jpg',
'images/tb_10.jpg',
'images/tb_11.jpg',
'images/tb_12.jpg',
'images/tb_13.jpg'
);

$('#gallery-next').click(function() {
    if($('ul#gallery li:last img').length == 0)
        var curIndex = 0;
    else
        var curIndex = galleryImages.indexOf(
            $('ul#gallery li:last img').attr('src'));
    $('ul#gallery li').children().remove();
    $('ul#gallery li').each(function(index,el){
        var img = new Image();
        $(img).load(function () {
            $(this).css('display','none');
            //$(el).append(this); -- doesn't work
            console.log('appended');
            $(this).fadeIn();
        }).attr('src',
                galleryImages[(curIndex+index) %
                              galleryImages.length]);
        //found indexes, will now loop!
        $(el).html(((curIndex+index) %
                              galleryImages.length));
        $(el).append(img); //does work
    });
});