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 $i = 0;
    $('.uploadPic').hide();
    $('#selectList img')
        .each(function(i, el){
            i++;
            $(this).addClass('ipt' + i);
        });
    $('#selectList img').click(function() {
        if ($(this).hasClass('clicked')) {
            $(this).removeClass('clicked');
            var data=($(this).attr('class').split(' '));
            $('input.'+data[0]).remove();
            $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();
        }
    });
});