JSFiddle - React, Tailwind, and code Playground

by Rajesh Dixit

HTML

<div class="content"></div>

CSS

img{
    width: 100px;
    height: 100px;
}

.selected{
    border: 2px solid blue;
}

JavaScript

var list = [];

function createImg(){
	var div = document.querySelector('.content')
	for(var i = 0; i< 10; i++){
    	let img = document.createElement('img');
        img.setAttribute('data-index', (i+1));
        img.setAttribute('alt', 'Image '+ (i+1))
        img.addEventListener("click", handleClick)
        div.appendChild(img)
    }
}

function handleClick(){
	var valid = addToList(this)
    if(valid)
    	this.classList.add('selected')
}

function addToList(img){
	if(list.length >= 6){
    	alert("Sorry! Too many Images selected")
        return false;
    }
    else if(list.indexOf(img) < 0){
    	list.push(img)
        return true;
    }
}

createImg();