textlab | collaborative space

I am aware that SVG elements have no z index. I am also aware that the order at which you define an SVG element will determine its vertical ordering. A fix to this from what I have seen on similar questions is typically to select the individual element and do something like: identifier.node().parentNode.appendChild(identifier.node());

Which brings it to the top of the deck. However, this doesn't work when you have multiple SVG elements that need to be moved to the top.

The following code (also see codepen link at bottom) is a boiled down example that consists of two adjacent circles and a square below them. Each circle has mouseover events that render their colors differently. However, the leftmost circle has text labels that, at the moment have an opacity of 0. The opacity changes when you hover over the square. These text labels obstruct the mouseover event of the circles when hovering over their respective positions. Crucially, while I could sloppily change the color of the leftmost circle when hovering over the text, some text labels overlap with the rightmost circle and would therefore render the circle an incorrect color at these overlapping positions. The solution I am looking for would change the vertical ordering of all text labels so that when hovering over all points of the leftmost circle, the circle turns green, and likewise, when hovering over the square, all text labels are on top, in red. How do I select all of them?