JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<img src="http://lorempixel.com/250/200/animals/1/" alt="">
<img src="http://lorempixel.com/250/200/animals/2/" alt="">
<img src="http://lorempixel.com/250/200/animals/3/" alt="">
<img src="http://lorempixel.com/250/200/animals/4/" alt="">
<img src="http://lorempixel.com/250/200/animals/5/" alt="">
<a href="#" class="view">View All</a>

CSS

* {font-family: 'Segoe UI', sans-serif;}
img {border: 2px solid #fff; cursor: pointer;}
img.selected {border: 2px solid #f00;}

JavaScript

$(document).ready(function(){
    $("img").click(function(){
        $(this).toggleClass("selected");
    });
    $(".view").click(function(){
        var urls = [];
        $("img.selected").each(function(){
            urls.push($(this).attr("src"));
        });
        alert(urls.join(", "));
        return false;
    });
});