Creating SVG elements dynamically

I am trying to create some circles in d3js dynamically, But for some reason it fails. My requirement is to show two small circles on the rectangle when I hover the rectangle. on the mouse out event circles should hide. I tried to it by creating a rect object and passing it to a function, then in the function I get the group of the rectangle and try to append circles to it.

Can anyone tell me where the error is?

function drawCircle(rect, side){

        var g = (rect.parentNode);
//                var g = d3.select(aaa.parentNode);
//        console.log(g.attr('id'));


        g.append('rect')
                .attr('x', 10)
                .attr('y', 10)
                .attr('width', 500)
                .attr('height', 500)
                .style('fill', 'red')
        ;

        var x = 0, y = 0, r =0;

        var rectHeight = parseFloat(rect.attr('height'));
        var rectWidth = parseFloat(rect.attr('width'));
        var rectX = parseFloat(rect.attr('x'));
        var rectY = parseFloat(rect.attr('y'));

        y = rectY + rectHeight/2;
        r  = rectHeight/8;

        if(side == 'left'){
            x = rectX;
        }else{
            x = rectX + rectWidth;
        }

        g.append('circle')
                .attr('cx', x)
                .attr('cy', y)
                .attr('r', r)
                .style('visibility', 'hidden')
                .on('mouseover', function(){
                   g
                            .selectAll('circle')
                            .style('visibility', 'visible')
                    ;
                })
                .on('mouseout', function () {
                    g
                            .selectAll('circle')
                            .style('visibility', 'hidden')
                });

        rect
                .on('mouseover', function(){

//                    alert('hover');

                    g
                            .selectAll('circle')
                            .style('visibility', 'visible')
                    ;
                })
                .on('mouseout', function(){
                   g
                            .selectAll('circle')
                            .style('visibility', 'hidden')

                })




    }




 var rectangle = {
        width : 50,
        height:50,
        x:100,
        y:100

    }; 

   var svg = d3.select('svg');

    var g = svg.append('g').attr('id', 'group');

    console.log(g.attr('id'));

    var rect = g.append('rect')
                    .attr('id', 'aaa')
            .attr('x', rectangle.x)
            .attr('y', rectangle.y)
            .attr('width', rectangle.width)
            .attr('height', rectangle.height)
            .style('fill', 'blue')
            .on('mouseover', function(){

                    drawCircle(this, 'right');
                    drawCircle(this, 'left');
                        })

     ;