JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 95 50">
    <circle cx="20" cy="10" r="5" data-Name="shape 1" data-tabindex="0" />
    <circle cx="15" cy="10" r="5" data-Name="shape 2" data-tabindex="0" />
    <circle cx="25" cy="10" r="5" data-Name="shape 3" data-tabindex="0" />
    <circle cx="35" cy="10" r="5" data-Name="shape 4" data-tabindex="0" />
</svg>

CSS

circle:active {
  fill: pink;
  stroke: red;
  stroke-width: 1;
}

JavaScript

$('circle').on('mousedown', function(e) {
  console.log(this);
  svgNode.insertBefore(svgNode, svgNode.firstChild)
  e.preventDefault();
 });