JSFiddle - React, Tailwind, and code Playground

by geekrule

HTML

<div id="selectList">


<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/304217_1802638724069_1980365657_n.jpg">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/303760_1802627683793_1369259350_n.jpg">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/308953_1802599163080_675715458_n.jpg">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/315760_1802579362585_1289641950_n.jpg">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/319127_1802576282508_1479879674_n.jpg" class="hoverZoomLink">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/314560_1786818408571_1789944239_n.jpg">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/s720x720/314560_1786818448572_882418073_n.jpg">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/s720x720/314560_1786818368570_365342361_n.jpg">
</div>
<form id='if'>
<button class='uploadPic'>hi</button>
</form>

CSS

div.box
{
width:100%;
padding:10px;
border:5px solid gray;
margin:0px;
height:100px;
}
#output{ width: 202px; border: 1px solid #000; margin: 2px; height: 400px; float: left; }

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

#selectList img
{
padding:10px;
width:80px;
height:80px;
}
img
{
 cursor:pointer;
}

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')) {
            var data = ($(this).attr('class').split(' '));
            //alert(data[0]);
            $('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();
        }
    });
});