JSFiddle - React, Tailwind, and code Playground

CSS

div[class^="data"],div[class^="par"],div[class^="opt"]{width:40px;height:40px;border:1px solid #000;float:left;}

JavaScript

html = document.querySelector('body');
for(var i = 1; i <= 4; i++){
html.insertAdjacentHTML("beforeend", "<div class='data"+i+"'></div>");
var data = document.querySelector(".data"+i);
data.addEventListener("click", func, false);
}
for(var i = 1; i <= 4; i++){
html.insertAdjacentHTML("beforeend", "<div class='par"+i+"'></div>");
var par = document.querySelector(".par"+i);
par.addEventListener("click", func, false);
}
for(var i = 1; i <= 4; i++){
html.insertAdjacentHTML("beforeend", "<div class='opt"+i+"'></div>");
var par = document.querySelector(".opt"+i);
par.addEventListener("click", func, false);
}

function func(){
var block = this.getAttribute("class").replace(/\d/g, '');
switch(block){
case block = 'data':
alert('Блок приндлежит классу data');
break;
case block = 'par':
alert('Блок приндлежит классу par');
break;
case block = 'opt':
alert('Блок приндлежит классу opt');
break;
}
}