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

$(document).ready(function() {
    var $i = 0;
    $('.uploadPic').hide();
    $('#selectList img').each(function(i, el) {
        i++;
        $(this).addClass('ipt' + i);
    });
    $('#selectList img').click(function() {
        if ($(this).hasClass('clicked')) {
            var data = $(this).attr('class').split(' ');
            $('input.' + data[0]).remove();
                        $('input.' + data[0]).remove();
                        /*$('input.' + data[0]).remove();
                        $('input.' + data[0]).remove();*/
            $(this).removeClass('clicked');
            $i--;
        }
        else {
            $i++;
            $(this).addClass('clicked');
            var newTextBoxDiv = $(document.createElement('div')).attr("class", 'selection');
            newTextBoxDiv.html('<input type="text" name="pics' + $i + '" class="ipt' + $i + '"/>');
            newTextBoxDiv.appendTo("#if");
            $('.ipt' + $i).attr('value', $(this).attr('src'));
        }
        if ($i === 0) {
            $('.uploadPic').hide();
            $('input').remove();
        }
        else {
            $('.uploadPic').show();
        }
    });
});