JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://edge1u.tapmodo.com/global/js/jquery.min.js"></script>
<input type='button' value='add slider' id='addSlider' onclick='addSlider();'>
<div id="content"></div>

CSS

#slideshow {
    position:relative;
    height:350px;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}
#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}
#slideshow IMG.last-active {
    z-index:9;
}

JavaScript

var i;
function buildslider(i, id, content) {

    id = id + i;

    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', id);
    newdiv.style.position = "absolute";
    newdiv.style.top = +topplus + "px";
    newdiv.style.left = +topplus + "px";
    newdiv.style.display = 'inline-block';

    newdiv.style.width = '320px';
    newdiv.style.height = '270px';
    newdiv.innerHTML = content;
    document.getElementById("content").appendChild(newdiv);
    topplus = topplus + 150;
    
    function slideSwitch() {
        var $active = $('#' + id + ' #slide_image.active');

        if ($active.length === 0) $active = $('#' + id + ' #slide_image:last');

        var $next = $active.next().length ? $active.next() : $('#' + id + ' #slide_image:first');

        $active.addClass('last-active');

        $next.css({
            opacity: 0.0
        })
            .addClass('active')
            .animate({
            opacity: 1.0
        }, 1000, function () {
            $active.removeClass('active last-active');
        });
    }

    $(function () {
        setInterval(slideSwitch, 3000);
    });
   i++;
}



function addSlider() {    
    buildslider('i', 'draggable', '<div id="slideshow"><img id="slide_image" src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg" class="active" /><img id="slide_image"  src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" /><img id="slide_image" src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg" /></div>');
}