JSFiddle - React, Tailwind, and code Playground

HTML

<div id='principal'></div>

CSS

#principal div {
    opacity:0.5;
    background-color:#ff3;
    width:100px;
    height:100px;
}

JavaScript

function asd() {
    this.ID = 0;
    for (var i = 0; i < 5; i++){

    this.ID++;

    capa = document.getElementById('principal');
    contenedor = document.createElement('div');
    contenedor.id = this.ID + ''; // aplicandolo como string
    contenedor.className = 'ClaseCSSDeprueva';
    capa.appendChild(contenedor);
    contenedor.addEventListener("mouseover", function () {
        this.style.opacity = 1;
    }, false);
    }
}
asd();