Pushing the top most object in an SVG container to the bottom

I know what I want to accomplish but I don't know how to go about it.

Background: I have an interactive report, using D3, that uses circles to provide a visual reference to application usage by user location on top of a rendered map of the US by zip code. In places, these circles overlap, obscuring those underneath and preventing those circles underneath from receiving events, like mouseover for example. This creates a stack of circles.

Objective: I want to be able to click on a circle to push it to the bottom of the stack, though not beneath any background object that makes up the map. Or, as in this sample, not behind the .bgCircle.

Here is some sample code I put together in JSFiddle to illustrate the issue.

The CSS:

.bgCircle {
  fill: blue;
  opacity: .25
}

.popCircle {
  fill: green;
  opacity: 0.5;
  stroke: black;
  stroke-width: 1px;
}

svg {
  border: 1px solid black;
}

The HTML

<svg width="500" height="500">
  <g>
    <circle class="bgCircle" cx="250" cy="250" r="250" />
    <circle id="A" class="popCircle" cx="200" cy="200" r="100" />
    <circle id="B" class="popCircle" cx="300" cy="200" r="100" />
    <circle id="C" class="popCircle" cx="300" cy="300" r="100" />
    <circle id="D" class="popCircle" cx="200" cy="300" r="100" />
  </g>
</svg>

The JavaScript

d3.selectAll('.popCircle')
  .on('click', function(d) {
    var text = 'force circle ' + d3.select(this).attr('id') + ' to bottom of the popCircle stack but above the bgCircle';
    alert(text);
  });

Sample Project

https://jsfiddle.net/MissAmberClark/ssghj37v/