JSFiddle - React, Tailwind, and code Playground

HTML

<div style="float: left; margin-right: 20px">
<p>
<h3>Cat: Meow</h3>
<image id='cat' src = "https://s1.postimg.org/44dc2zepkv/kitten-small.png" />
</p>

<p id="counted"></p>
</div>

<div>
<p>
<h3>Cat: Kiki</h1>
<image id='cat2' src = "https://s1.postimg.org/53hxzss5gf/Cat_Dual.jpg" />
</p>

<p id="counted2"></p>
</div>

JavaScript

document.getElementById ("cat").addEventListener ("click", updateCounter, false);
    var count = 0;
    function updateCounter() {
        count++;  
        document.getElementById("counted").innerHTML = "This has been clicked " + count + " times.";
    }
    document.getElementById ("cat2").addEventListener ("click", updateCounter2, false);
    var count2 = 0;
    function updateCounter2() {
        count2++;  
        document.getElementById("counted2").innerHTML = "This has been clicked " + count2 + " times.";
    }