JSFiddle - React, Tailwind, and code Playground

by Rajesh Dixit

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">
     ...

CSS

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

.item {
    float: left;
}

JavaScript

var urls = [];
jQuery('body').on('change', '.masonry .item :checkbox', function() {
    if (urls.length > 6) {
        alert("Puoi aggiungere un massimo di 6 immagini");
    } else {
    	var src = jQuery(this).next('label').find('img').attr('src');
        if(urls.indexOf(src) < 0)
            urls.push(src);
    }
});