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

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] + "' id=\"thumb\"/></a></li>");
    //$("#sup ul").append("<li><a href=" + image[i] + "><img src='" + image[i] + "'/></a></li>");
}



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'];

    $(".mylist li").click(function () {
        //$(".enlarge img").attr("src", $("#thumb").attr("src"));
        alert($("#thumb").attr("src", $(this).attr("src")));
    });
}
myFunc();