Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: green;
            display: inline-block;
            position: absolute;
            left:0;
            top:0;
        }
        .c1{
            background: orange;
        }
        .c2{
            background: red;
        }
        .hide{
            background: black;
        }

    </style>
</head>
<body>
    <script>
        for(let i = 1; i<7; i++){
            let el = document.createElement('div')
            document.body.appendChild(el)
            el.classList.add('box')
            el.classList.add('hide')
            if(i%2) {
                el.classList.add('c1')
                el.val = 0
            }
            else{
                el.classList.add('c2')
                el.val = 1
            }
            el.style.left = 110*(i%3) + 'px'
            el.style.top = 110 * Math.ceil(i/3) +'px'
            el.addEventListener('click', function(e){
                el.classList.toggle('hide')
            })
        }
    </script>
</body>
</html>