JSFiddle - React, Tailwind, and code Playground

by Kevin Hansen

HTML

<div class="over">Styling Works here</div>
<br>
<div id="content"></div>
<div class="over" id="clickMe">Click me</div>

CSS

.styling {
    font-weight: bold;
}

JavaScript

$("#clickMe").click(function () {
	    var x = 0;
	    var y = (Math.random() * 10) + 1;
	    var output = "";
	    for (x; x < y; x++) {
	        output = output + '<div class="over">'+
                'But not for these generated divs'+ 
                '</div>';
	    }
	    output += '<br>';
	    console.log(output);
	    $("#content").html(output);

	});

	$(".over").hover(function () {
	    $(this).addClass("styling");
	});


	$(".over").mouseout(function () {
	    $(this).removeClass("styling");
	});