JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<div id="selectList2">
    <img src="http://tinyurl.com/26asnv7" />
    <img src="http://tinyurl.com/26asnv7" />
    <img src="http://tinyurl.com/26asnv7" />
    <img src="http://tinyurl.com/26asnv7" />
    <img src="http://tinyurl.com/26asnv7" />
</div>
<input id="imgpath2" type="text">
<div id="output2">

</div>

CSS

#output2, #selectList2 { width: 202px; border: 1px solid #000; margin: 2px; height: 400px; float: left }

#selectList2 img.clicked { border: 1px solid Blue }

JavaScript

$(function(){
      $('#selectList2 img')
        .each(function(i, el){
            $(this).addClass('img' + i); // identtify imgs by index (class="imgN")
        })
        .click(function(){
            var $img = $(this).toggleClass('clicked');
            var src = $(this).attr("src");
             document.getElementById('imgpath2').value = src;
           
});