JSFiddle - React, Tailwind, and code Playground

by Yogesh Mistry

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="masonry"><div class="item"><input type="checkbox" name="thing_1" value="valuable" id="thing_1"><label for="thing_1"><img class="img-responsive" src="http://independentskies.com/wp-content/uploads/2013/11/428126-3732x2655.jpg"></label></div><div class="item"><input type="checkbox" name="thing_2" value="valuable" id="thing_2"><label for="thing_2"><img class="img-responsive" src="http://viajescasaquinta.com/wp-content/uploads/2016/11/Grecia.jpg"></label></div><div class="item"><input type="checkbox" name="thing_3" value="valuable" id="thing_3"><label for="thing_3"><img class="img-responsive" src="http://www.venamimundo.com/Europa/Grecia/Grecia-02.jpg"></label></div><div class="item"><input type="checkbox" name="thing_4" value="valuable" id="thing_4"><label for="thing_4"><img class="img-responsive" src="http://www.o1visa.com/wp-content/uploads/2016/01/ia-oia-santorini-grecia.jpg"></label></div><div class="item"><input type="checkbox" name="thing_5" value="valuable" id="thing_5"><label for="thing_5"><img class="img-responsive" src="http://www.turismogrecia.info/images/in/grecia-turquia.jpg"></label></div><div class="item"><input type="checkbox" name="thing_6" value="valuable" id="thing_6"><label for="thing_6"><img class="img-responsive" src="http://best5.it/b5/wp-content/uploads/2013/12/Grecia-antica-5-date-memorabili-1-800x400-800x400.jpg"></label></div><div class="item"><input type="checkbox" name="thing_7" value="valuable" id="thing_7"><label for="thing_7"><img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/ec/4a/5d/ec4a5d6dbf78a843711442c99ac6d34a.jpg"></label></div><div class="item"><input type="checkbox" name="thing_8" value="valuable" id="thing_8"><label for="thing_8"><img class="img-responsive" src="http://www.moldrek.com/Immagini/grecia_fisica.JPG"></label></div><div class="item"><input type="checkbox" name="thing_9" value="valuable" id="thing_9"><label...

CSS

.item img {
  max-width: 200px;
}

.item {
  float: left;
}

JavaScript

var urls={};
console.clear();
jQuery('body').on('click', '.masonry .item :checkbox', function (e) {
	var this_id = jQuery(this).attr("id");
  var is_checked = jQuery(this).is(":checked");
   console.log(urls, this_id, is_checked);
   if(is_checked){
      if (Object.keys(urls).length < 6){
         urls[this_id] = jQuery(this).next('label').find('img').attr('src');
      } else {
      	alert("Puoi aggiungere un massimo di 6 immagini");
        e.preventDefault();
        return false;
      }
   } else {
   		delete(urls[this_id]);
   }
    
});