JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<select class='image-picker show-html' name="favouritehighstreet" multiple="multiple" id="favouritehighstreet">
  <option data-img-src='http://www.style-card.co.uk/id/assets/img/signup/Q1-1.jpg' value='French Connection'>French Connection</option>
  <option data-img-src='http://www.style-card.co.uk/id/assets/img/signup/Q1-2.jpg' value='Reiss'>Reiss</option>
  <option data-img-src='http://www.style-card.co.uk/id/assets/img/signup/Q1-3.jpg' value='Ted Baker'>Ted Baker</option>
  <option data-img-src='http://www.style-card.co.uk/id/assets/img/signup/Q1-4.jpg' value='Diesel'>Diesel</option>
  <option data-img-src='http://www.style-card.co.uk/id/assets/img/signup/Q1-5.jpg' value='Gap'>Gap</option>
  <option data-img-src='http://www.style-card.co.uk/id/assets/img/signup/Q1-6.jpg' value='Whistles'>Whistles</option>
</select>
<textarea id="out" cols="30" rows="5"></textarea>

JavaScript

$('.image-picker').change(function() {
        var ctSelected = $(this).val().length;
        $("#out").val(ctSelected);
        
        if(ctSelected > 3){
            alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.');
        }
    });