JSFiddle - React, Tailwind, and code Playground

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() {
    $('.uploadPic').hide();
    
    var i = 0;
    $('#selectList img').each(function() {
        $(this).data('i', i++);
    });
    
    $('#selectList').on('click', 'img', function() {
        var $img = $(this);
        $img.toggleClass('clicked');
        
        if ($img.hasClass('clicked')) {
            var $input = $('<div>', {
                'class': 'selection',
                'html': $('<input>', {
                    'value': $img.attr('src'),
                    'name': 'pics' + $img.data('i')
                })
            });
            $img.data('input', $input);
            $('#if').append($input);
        }
        else {
            $img.data('input').remove();
        }

        $('.uploadPic').toggle($('#if input').length > 0);
    });
});