Bootstrap 5 dynamic popover

I was looking for a way to load a popover content dynamically and came up with the idea of calling a function to pull the id of the generated div and inject the new content there.

Not sure if I'm reinventing the wheel or if it may have unintended consequences. Is there a better way to do this?

<a 
   onmouseover="change('pop')"
   data-bs-toggle="popover" 
   id="pop"  
   title="Title" 
   data-bs-content="Content"
   >Text</a>

<script>
function change(id) {
                    var a = document.getElementById(id);
                    var b = a.getAttribute("aria-describedby");
                    var body = document.getElementById(b).querySelector(".popover-body");  
                    var header = document.getElementById(b).querySelector(".popover-header"); 
          // here you can get body and header by ajax or fetch
                    body.innerHTML ="New Body<br>Line 2";
                    header.innerHTML ="New Title";                                                          
                    }

new bootstrap.Popover(document.body, 
   { selector: '[data-bs-toggle="popover"]',
    trigger:'hover focus'   }); 
</script>

Codepen