JSFiddle - React, Tailwind, and code Playground

by Igor Cuckovic

CSS

.cats {
  float: left;
}

JavaScript

var names = ["Rob", "Roy", "Danny", "Minny", "Moe"];
var clicks = [];

names.forEach(function (d, i) {
	clicks.push(0);
  
  var cats = document.createElement('div');
  cats.className = 'cats';
	var h3 = document.createElement('h3');
	h3.className = 'counter' + i; 
  h3.innerHTML = d + " clicks: " + 0;

  var img = document.createElement('img');
  img.src = "https://placekitten.com/20" + i + "/200";
  
	img.addEventListener('click', (function(num) {
        return function() {
            clicks[num] += 1;
            h3.innerHTML = d + " clicks: " + clicks[num];
            //console.log(clicks[num])
        };
    })(i));
  
  cats.appendChild(h3);
  cats.appendChild(img);
  
  document.getElementsByTagName('body')[0].appendChild(cats);
	
});