JSFiddle - React, Tailwind, and code Playground

by Zhelyakea

HTML

<div id="mainDiv"></div>

CSS

.clicky {
  width: 50px;
  height: 20px;
  background-color: grey;
  border: 1px solid white;
   text-align:center;
    color:white;
}
.red{
   background: red;
}

JavaScript

$('div').on('click', '.clicky', function() {
 var id = parseInt(this.id);   
    $(this).toggleClass('red');  	
});

$(document).ready(function() {
  //var stringHTML = "";
   for(i=1;i<5;i++){
       //var stringParth = '<div id=' + i + ' class="clicky">'+i+'</div>';
        //stringHTML = stringHTML + stringParth;
       //$('#mainDiv').html(stringHTML)
       $('#mainDiv').append('<div id=' + i + ' class="clicky">'+i+'</div>')
   }
    //$('#mainDiv').html(stringHTML)
});
(function(d){
var mocallback = function(mutationrecords){
		mutationrecords.map( function(mr){
			alert( mr.target.id );
		});
	}
	mo = new MutationObserver(mocallback),
	options = {
		//'childList':true
		//'attributes':true,'attributeOldValue':true,
        'attributeFilter':['class']
	},
	mo.observe( d.querySelector('.clicky'),options);
})(document);