добавление элемента svg в список узлов применяется только в последнем элементе цикла

Question

Я бы добавил rect к каждому первому дочернему элементу списка узлов.

Я зацикливаю этот список и каждый раз добавляю прямоугольник

Происходит следующее: прямоугольник добавляется только в последний элемент цикла.

let rect : NodeList = this.synoptic.nativeElement.querySelectorAll("#stops g");
let rect2 = document.createElementNS('http://www.w3.org/2000/svg','rect');
rect2.setAttribute("fill","red");
rect2.setAttribute('x', '0');
rect2.setAttribute('y', '0');
rect2.setAttribute('height', '50');
rect2.setAttribute('width', '50');
rect.forEach((elm : Node) => {
  elm.insertBefore(rect2,elm.firstChild);
  console.log(elm)
})

Здесь пример