JSFiddle - React, Tailwind, and code Playground

by creativecouple

HTML

<script src="http://creativecouple.github.io/jquery-timing/jquery-timing.min.js"></script>
<p>Choose your preferred image</p>
<ul class="choices">
    <li><img class="selected" src="http://farm1.staticflickr.com/19/90495389_d440522366_s.jpg" alt="Spaghetti Bolognese"/></li>
    <li><img src="http://farm2.staticflickr.com/2139/1654258670_b841a80147_s.jpg" alt="Spaghetti Carbonara"/></li>
    <li><img src="http://farm3.staticflickr.com/3539/3442896189_cb5b0fbd5e_s.jpg" alt="Tortellini"/></li>
    <li><img src="http://farm4.staticflickr.com/3487/3463667101_17a89cbb4f_s.jpg" alt="Shrimps"/></li>
    <li><img src="http://farm1.staticflickr.com/3543/3436037485_42ff9bd5dc_s.jpg" alt="Cake"/></li>
    <li><img src="http://farm2.staticflickr.com/3326/3490412194_cd6610ecd3_s.jpg" alt="Sweets"/></li>
    <li><img src="http://farm3.staticflickr.com/2356/2095984769_62751d9763_s.jpg" alt="Coffee"/></li>
</ul>

<p><button id="result" onclick="alert($('.selected').attr('alt'))">ready</button></p>

CSS

li {
    display: inline;
}
img {
    cursor: pointer;
    border: 15px solid transparent;
    background-color: transparent;
}
img:hover {
    border-color: silver;
    background-color: silver;
}
img.selected {
    border-color: red;
    background-color: red;
}
img.selected:hover {
    border-color: maroon;
    background-color: maroon;
}

JavaScript

$(".choices").on('click','img')
    .add('.selected').toggleClass('selected')
    .$('#result').attr('disabled',false)
._.on('click','img.selected')
    .$('#result').attr('disabled',true);