JSFiddle - React, Tailwind, and code Playground

by geekrule

HTML

<div id="selectList">
    <img src="http://tinyurl.com/26asnv7" />
    <img src="http://tinyurl.com/26asnv7" />
    <img src="http://tinyurl.com/26asnv7" />
    <img src="http://tinyurl.com/26asnv7" />
    <img src="http://tinyurl.com/26asnv7" />
</div>
<form id='if'>
<button class='uploadPic'>hi</button>
</form>

CSS

#selectList { width: 202px; border: 1px solid #000; margin: 2px; height: 400px; float: left }

#selectList img.clicked { border: 1px solid Blue }

JavaScript

$(function() {
    var $input = $('<div>', {
        'class': 'selection',
        'html': $('<input>', {
            'type': 'text',
            'id': 'num',
            'name': 'numpics'
        })
    });
    $('#if').data('input', $input);
    $('#if').append($input);
    $('.uploadPic').hide();
    var i = 0;
    var j = 0;
    $('#selectList img').each(function() {
        $(this).data('i', i++);
    });
    $('#selectList').on('click', 'img', function() {
        var $img = $(this);
        $img.toggleClass('clicked');

        if ($img.hasClass('clicked')) {
            if (j === 3) {
                $img.toggleClass('clicked');
                alert('only 3 photos allowed');
            }
            else {
                j++;
                var $input = $('<div>', {
                    'class': 'selection',
                    'html': $('<input>', {
                        'type': 'text',
                        'value': $img.attr('src'),
                        'name': 'pics' + j
                    })
                });
                $img.data('input', $input);
                $('#if').append($input);
                $('#num').attr('value', j);
            }
        }
        else {
            j--;
            $('#num').attr('value', j);
            $img.data('input').remove();
        }
        if ($('#if input').length === 1) {
            $('.uploadPic').hide();
        }
        else {
            $('.uploadPic').show();
        }
    });
});