JSFiddle - React, Tailwind, and code Playground

by Marco Abate

HTML

<div class="image selected"><img src="http://lorempixel.com/200/200/people/" /></div>
<div class="image"><img src="http://lorempixel.com/200/200/nightlife/" /></div>
<div class="image"><img src="http://lorempixel.com/200/200/food/" /></div>
<div class="image"><img src="http://lorempixel.com/200/200/animals/" /></div>
<button class="send" type="button">Send</button>

CSS

.image {
    float: left;
    padding: .3em;
    cursor: pointer;
}

.image.selected {
    background: lightskyblue;
}

.send {
    float: left;
    display: block;
}

JavaScript

var imgArray = [];

var onImageClick = $('body').on('click', '.image', function(e) {
    e.preventDefault();
    var that = $(this);
	that.toggleClass('selected');
    var srcAttr = that.find('img').attr('src');
})

var onSendClick = $('body').on('click', '.send', function(e) {
	imgArray = [];
	e.preventDefault();
    $('.image.selected').each(function() {
        var that = $(this);
        var srcAttr = that.find('img').attr('src');
        imgArray.push(srcAttr);
    })
    alert(imgArray);
})