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.
https://downloader.vip/rufus/ https://appsync.biz/123movies/

Can you share your code via codepen?