JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sup">
    <ul class="mylist"></ul>
    <div class="enlarge">
        <img src="http://www.tinywonderstudios.com/gfx/press/pixi_icon_100x100.png" width="200" height="200" />
    </div>
</div>

CSS

.mylist li {
    list-style:none;
    display:inline;
    padding-right: 5px;
}
#sup {
    height:350px;
    width:400px;
    border:1px solid blue;
}
.enlarge img {
    margin-left:90px;
}

JavaScript

function myFunc() {
    var image = ['http://www.tinywonderstudios.com/gfx/press/pixi_icon_100x100.png', 'http://fun-learning-express.6te.net/wp-content/thumbs/mochi/C/click-the-frog.png', 'http://d3sdoylwcs36el.cloudfront.net/iTunes-logo-100x100.jpg'];

    for (var i = 0; i < image.length; i++) {
        $("#sup ul").append("<li><img src='" + image[i] + "'/></a></li>");
        //$("#sup ul").append("<li><a href=" + image[i] + "><img src='" + image[i] + "'/></a></li>");
    }

    $(".mylist li").click(function () {
        var src = $(this).find('img').attr('src');
        $(".enlarge img").attr("src", src);
    });
}
myFunc();