Any Elementor or JS expert for advise

Here is the problem, I have a page with a side panel that is built using Elementor popups. On the page there the user clicks a button to show the side panel, the content shown must be decided the moment the side panel opens. i.e.: Let's say I have a select where the user can choose any of 5 options, when the button is clicked to open the side panel, it must show one of 5 Elementor templates based on the user's selection on the main page. Since I am using Elementor I find that Elementor renders everything, including the popup when it loads, thus making the user selection irrelevant, always showing the content for the default selection that was active when the page loads. These are the options I have available at the moment:

1. Delay the popup rendering to occur when the user clicks the open side panel button. So far I don't believe this is possible with Elementor. Besides this solution creates another problem, if the user closes the popup and opens it again after changing the selection it will always show the popup for the first selection when it opened the first time.
2. Render the popup every time this would be a very viable solution, it would work every time the user changes the selection. The problem is that I can't seem to find how to do it unless I find a way to get the widgets instance from Elementor and then call the render function before showing the popup (I know Render is a protected method, but I can work around it)
3. Using JS, the problem is that the selection is in the server side and JS works on the client side. I am a not so good writing JS (just the basics) so I don't know how I would do it.

I am open to suggestions and alternate solutions that anyone here can offer.

Thanks in advance for your input.