how to create a Popover dynamically for each rendered item

I’m trying to create a popover dynamically for all my to be rendered elements.

However the method from this post only outputs the following error message:
“TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.”

In the end the svg should behave like a bootstrap popover. All the necessary libs are in the project.

Here is my code:

function renderLinkIcon(node) {
  const iconSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  const iconPath = document.createElementNS(
    'http://www.w3.org/2000/svg',
    'path'
  );

  iconSvg.setAttribute('height', "16px");
  iconSvg.setAttribute('width', "16px");
  iconSvg.setAttribute('fill', 'currentColor');
  iconSvg.setAttribute('viewBox', '0 0 16 16');
  iconSvg.setAttribute('stroke', 'black');
  iconSvg.setAttribute('class', 'bi bi-three-dots-vertical threeDotsMenu');

  iconPath.setAttribute(
    'd',
    'M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'
  );


  iconSvg.appendChild(iconPath);



  let editAndDeleteDiv = document.createElement("div");

  editAndDeleteDiv.setAttribute("type", "Button")
  editAndDeleteDiv.setAttribute("data-toggle", "popover")
  editAndDeleteDiv.setAttribute("title", "My first popover")
  editAndDeleteDiv.setAttribute("data-content", "this is the content")
  editAndDeleteDiv = $(editAndDeleteDiv)
  editAndDeleteDiv.popover()


  editAndDeleteDiv.append(iconSvg);



  return node.appendChild(editAndDeleteDiv)


}```