JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <svg class="rect-1"></svg>
    <svg class="rect-1"></svg>
    <svg class="rect-2"></svg>
    <svg class="rect-1"></svg>
    <svg class="rect-3"></svg>
    <svg class="rect-2"></svg>
    <svg class="rect-3"></svg>
    <svg class="rect-2"></svg>
</body>

CSS

svg {
    width: 200px;
    height: 30px;
}

JavaScript

d3.selectAll("svg.rect-1")
    .append("rect").attr("x", 50)
    .attr("y", 10)
    .attr("height", 20)
    .attr("width", 200)
    .attr("title", "catalog")
    .style("fill", "#CB4B19")
    .on("click", mouseClick);

d3.selectAll("svg.rect-2")
    .append("rect").attr("x", 50)
    .attr("y", 10)
    .attr("height", 20)
    .attr("width", 200)
    .attr("title", "bird")
    .style("fill", "red")
    .on("click", mouseClick);

d3.selectAll("svg.rect-3")
    .append("rect").attr("x", 50)
    .attr("y", 10)
    .attr("height", 20)
    .attr("width", 200)
    .attr("title", "plane")
    .style("fill", "cyan")
    .on("click", mouseClick);

function mouseClick(d) {
    var t = d3.select(this).attr("title"); //store the "title" property  of the clicked rectangle

    d3.selectAll("rect[title='" + t + "']").each(function (d, i) { //Select all rectangles drawn with title attribute equal to the rectangled clicked
        console.log('Do something with this specific rectangle');
        console.log(d3.select(this));
        var k = d3.select(this)
        console.log(k);
        
    });
}