JSFiddle - React, Tailwind, and code Playground

by flowstoneknight

HTML

<div><img class="item" src="http://i.imgur.com/k5gNdPn.jpg" height="100" /></div>
<div><img class="item" src="http://i.imgur.com/k5gNdPn.jpg" height="100" /></div>
<div><img class="item" src="http://i.imgur.com/k5gNdPn.jpg" height="100" /></div>

CSS

.active {
    border: 1px solid red;
}

JavaScript

$('.item').on('click', function() {
    $('.item').removeClass('active').each(function() {
        //don't forget to change the sources back for the other images
        $(this).attr('src', $(this).attr('src').replace('uNY4tKu.jpg','k5gNdPn.jpg'));
    });
    $(this).addClass('active').attr('src', $(this).attr('src').replace('k5gNdPn.jpg','uNY4tKu.jpg'));
});