JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1">
   <div class="c1">
            <a href="http://stackoverflow.com/"><img src="http://i.imgur.com/tL6nW.gif"></a>
            <a href="http://meta.stackoverflow.com/"><img src="http://i.imgur.com/BfZ5f.gif"></a>
            <a href="http://chat.meta.stackoverflow.com/"><img src="http://i.imgur.com/mR7wo.gif"></a>       
   </div>
</div>
<div id="d"></div>

JavaScript

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
    $("#d1 > .c1").append('<br/><a href="'+$images.eq(0).attr("href")+'">Link to Image 1</a>');

    $("#d1 > .c1 > a:first").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        
        $("#d1 > .c1 > a:last").html('Link to Image '+(1 + $imgShow % $length));
        $("#d1 > .c1 > a:last").attr("href", $($images).eq($imgShow % $length).attr("href"));
        
        event.preventDefault();

    });
});