let readcomment = event.target.closest(".read-comment");
        let dataAttribute = readcomment.getAttribute('data-id');
        let url = "../comments/" + dataAttribute + "/";
        fetch(url)
            .then(function (response) {
                return response.text();
            })
            .then(function (data) {
                console.log(data)
            })
            .catch(function (error) {
                console.log(error);
            });

When "read-comment" is clicked, I get the data-id value and build the URL variable.

I get the data from the URL with JS fetch function.

I would like to render fetched data in a bootstrap modal (using bootstrap 5)

On bootstrap, documentation says we can create a modal with

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

In my project, the "Read-comment" button is in the first file and "myModal" content is in a second different file, and then when the button is clicked, the previous code return :

TypeError: this._element is undefined"

The problem is "document.getelementbyid("myModal")" returns null because myModal is in another file that is not loaded on the first page.

How should I do?

Thank you for your help.