JSFiddle - React, Tailwind, and code Playground

HTML

<svg width=90% height=500px>
    <rect id="rect1" ry=0 rx=0 x=50 y=50 width=20px height=20px fill=red />
	
	<rect id="rect2" ry=0 rx=0 x=80 y=50 width=20px height=20px fill=blue />
	
	<rect id="rect3" ry=0 rx=0 x=110 y=50 width=20px height=20px fill=green />
</svg>

JavaScript

var shapes = document.getElementsByTagName('rect');

for (var i = 0; i < shapes.length; i++) {
    shapes[i].addEventListener('click', showID, false);
}
function showID(){
    alert(this.id);
}