XF 1.5 Need a bit of help with js onclick popup

[RichardKYA]

Hello,

I'll start off by saying I am rubbish with js.

I am trying create an onclick popup div and after falling into a Google hole and being lost for about 12hrs, I think I have finally got things kinda working, BUT, the issue I am having is that the content of the popup relies on a variable that goes through a xen:foreach.

At the moment, I am trying to get the content from a div that has "display:none" via getElementById, but of course, the id is also subject to a variable that goes through the xen:foreach, example: id="item_{$user.user_id}".

So, a couple of questions:

1 - Is this the best way to do this?
2 - How can I pass xf variables in my js?
3 - Would it be possible to create the div and fetch the content at the same time instead of fetching it all first and hiding it with display:none? - Eg, instead of getElementById, just have content='{$example.content}' or something?

Here is an example of the code I have, I've changed the id and the getElementById to help explain what it is that I am trying to do, but like I say, I haven't a clue, so if this is not the way to go, I am very much open to suggestions

<xen:foreach>
<span onClick="myPopup();" class="more-button">More</span> // Once this is clicked
                            <div id="item_{$user.user_id}" style="display:none"> // This Pops up
                                <h3>{$var.name}</h3>
                                <h4>{$var.info}</h4>
                                <a href="link to page" class="view-page-link">View Page</a>
                            </div>
</xen:foreach>

...my js...

 function myPop(){
     
// Creates a full width/height div as a "click-away" area to close popup
    var close = document.createElement('div');
        close.className = 'close-popup';
        close.onclick = function (e) { close.parentNode.removeChild(close) };
        
// Creates popup div to contain content
    var varInfo = document.createElement('div');
        varInfo.className = 'info';
        
// Creates span inside popup to contain text fetched by id from display:none div
    var infoText = document.createElement('span');
           infoText.innerHTML = document.getElementById('item_{$user.user_id}').innerHTML;
        
        varInfo.appendChild(infoText);                                    
        close.appendChild(varInfo);
    
    document.body.appendChild(close);
    }

Thank you for any help, I appreciate it