Bring selected annotation to the foreground among overlapping annotations

I’m showing a plot with annotations, which naturally overlap when they are too close.
When the user selects an annotation (this happens outside plotly), I would like to bring it to the foreground.

I tried to dynamically change the z-index of the corresponding <g class="annotation" ... element, the css appears in the style attribute but has no effect.

Is there any parameter that lets my set the stacking order? Or should I move the element that should be on top to the end of the array?

Check this

https://codepen.io/saratoga01/pen/wBvrXXw?editors=0010

Very neat, thank you!