d3. join with nested elements

I am trying to use d3.join and trying to get this DOM structure.
The data is dynamic and data size will change. I want to append all rectangles with in a separate group (“g”). When you click on the circle more than once to draw the rectangles, several empty “g” elements are created. Please help me learn what I am doing wrong. Thanks

Here is the code pen link

https://codepen.io/zubair57/pen/mdqWLRV?editors=0011

<svg width="800" height="3800">
  <g>
    <circle cx="600" cy="100" r="20"></circle>
  </g>
  <g>
    <rect width="600" height="20" x="0" y="0" class="bil"></rect>
  </g>
  <g>
    <rect width="200" height="20" x="0" y="25" class="bil"></rect>
  </g>
  <g>
    <rect width="300" height="20" x="0" y="50" class="bil"></rect>
  </g>
  <g>
    <rect width="400" height="20" x="0" y="75" class="bil"></rect>
  </g>
  <g>
    <rect width="900" height="20" x="0" y="100" class="bil"></rect>
  </g>
  <g>
    <rect width="200" height="20" x="0" y="125" class="bil"></rect>
  </g>
</svg>