How to add or append in between two elements inside of SVG?

Question

I have a small code of SVG. I want to append or add a code between two elements in SVG code. I tried using jquery script. But it not working so finally, I came here

My code

<svg width="500" height="500">  
  <circle id="circle1" class="sid" cx="50" cy="50" r="20" fill="red"/>
  <circle id="circle2" class="sid" cx="150" cy="50" r="20"  fill="green"/>
  <circle id="circle4" cx="350" class="sid" cy="50" r="20" fill="yellow"/>  
</svg>

$(document).ready(function() {
    $(".sid").mouseenter(function() {
      alert("I'm here");
$('#circle2').append('<circle id="circle3" cx="250" class="sid" cy="50" r="20" fill="blue"/>');  

     });
    $(".sid").mouseleave(function() {
       // action
     });
});

How can I achieve this? is it possible using jquery or JS? your answer is valuable.

DEMO

I'm expecting output like

<svg width="500" height="500">  
  <circle id="circle1" class="sid" cx="50" cy="50" r="20" fill="red"/>
  <circle id="circle2" class="sid" cx="150" cy="50" r="20"  fill="green"/>
  <circle id="circle3" cx="250" class="sid" cy="50" r="20" fill="blue"/>
  <circle id="circle4" cx="350" class="sid" cy="50" r="20" fill="yellow"/>  
</svg>