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' name='forms' method='post'>
<button type='submit' class="uploadPic">Upload Fb</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() {
  $('#if input').remove();
    var $input = $('<div>', {
        'class': 'numData',
        'html': $('<input>', {
            'type': 'hidden',
            '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': 'hidden',
                        'value': $img.attr('src')
                    })
                });
            
                $img.data('input', $input);
                $('#if').append($input);
                $('#num').attr('value', j);
                            $('.selection input').each(function(i,el){
                i++;
                $(this).prop('name','pics'+i);
            });
            }
        }
        else {
            j--;
            $('#num').attr('value', j);
            $img.data('input').remove();
            $('.selection input').each(function(i,el){
                i++;
                $(this).prop('name','pics'+i);
            });
            }
        if ($('#if input').length === 1) {
            $('.uploadPic').hide();
        }
        else {
            $('.uploadPic').show();
        }
    });
    $('.uploadPic').click(function(){
   $.ajax({
        type: "POST", 
        url: 'http://private.millenials.co.in/facebk/faceload', 
        data: $('#if').serialize(),
        success: function(data) { 
           ...