JavaScript not working when used with - Element.insertAdjacentHTML()

Hey guys, I am dealing with a problem that I cannot solve. I have an html file index.html where I have a normal html content, head body etc. A normal webpage in which I want to inject a modal. I cannot modify the source of this index.html but I can add a <script> in the head of this file. Now what I did is I added this js file in which I created 2 variables in which I collected head and body of this main html file. After I created 2 new variables, let’s say new_head and new_body in which I wrote some css and html that will be added to main html using Element.insertAdjacentHTML().

After visiting the page, I can view by inspecting the code, not the source that my code has been injected into main html, but the JavaScript trigger doesn’t work ( doesn’t strigger by div) I would like to point out that I did include all necessary code used by a modal to work. Same code written by hand into that main html file, works fine, injected doesn’t. I am not an expert by any stretch in PHP, or JavaScript, so please don’t be mean as I am still learning. As I said at the beginning of this post, the only way to manipulate this html file is to add JavaScript files that will be triggered when page loads. Thank you.

Can you share your code via codepen?