JSFiddle - React, Tailwind, and code Playground

HTML

<div class="selectable">
  </div>
  <div class="selectable">
  </div>
  <div class="selectable selected">
  </div>

CSS

.selectable {
  background-color:red;
  width: 250px;
  height: 250px;
}
.selected {
  background-color:green;
}

JavaScript

$(document).ready(function() {
		$('.selectable').click(function(e) {
    	const elem = $(e.currentTarget);
    	if(elem.hasClass('selected')) {
      	elem.removeClass('selected');
      } else {
      	elem.addClass('selected');
      }
    })
})

$(document).ready(function() {
	$('.selectable').on('customSelectEvent', (e) =>{
  	console.log("hello, world!");
    // Do your stuff here
  });
	// Get the starting list of selectable elements
  var selecteds = $('.selected');
  // Using setInterval to make sure this runs at the back of the event loop
  setInterval(() => {
    let loopSelecteds = $('.selected');
    $.each(loopSelecteds, function(loopIndex, loopSelected) {
    	let alreadySelected = false;
      $.each(selecteds, function(index, selected) {
      	if ($(selected).get(0) === $(loopSelected).get(0)) {
        	alreadySelected = true;
        }
      });
      if (!alreadySelected) {
      	$(loopSelected).trigger('customSelectEvent');
      }
    });
    selecteds = loopSelecteds;
  }, 0);
})