JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div class="container"><div class="col" data-column="1"></div>
<div class="col" data-column="2"></div>
<div class="col" data-column="3"></div>
<div class="col" data-column="4"></div></div>

CSS

.col {
  width: 100px;
  height: 100px;
  bordeR: 1px solid green;
}

JavaScript

$('.col').on('click', function(){
  $(this).addClass('active');
  $('.col').not(this).removeClass('active');  
});


var Observer = function(element) {
  this.element = element;
  this.mutationObserver = new MutationObserver(function(mutations){
    return 	this.handleMutations(mutations); 
  }.bind(this));

	return this;
}
Observer.prototype.start = function() {
	  this.mutationObserver.observe(this.element, { childList: true, subtree: true, attributes: true });
    return this;
}
Observer.prototype.disconnect = function() {
	   this.mutationObserver.takeRecords();
     this.mutationObserver.disconnect();
    return this;
}
Observer.prototype.handleMutations = function (mutations) {
for (var i =0; i < mutations.length; i++) {
  	var mutation = mutations[i];
    this.processMutation(mutation);
   }
}
Observer.prototype.processMutation = function (mutationRecord) {
  		if (mutationRecord.type == "attributes" && mutationRecord.attributeName == "class") {
       	// the code here        
        if($(mutationRecord.target).hasClass("active")) {
        		console.log($(mutationRecord.target).attr('data-column')+" col was active");
        }
      }  
} 

new Observer(document.querySelector('.container')).start()