No está llamando a su función modal con su identificación de modales.

 $("#myModal").modal();

El selector de Jquery debe hacer coincidir la identificación de los elementos modales con el modal para que aparezca. Y no tiene que crear un clon modal para cada producto, solo puede cambiar el contenido del modal. Esto acelerará el tiempo de carga de su página.

 let http = new XMLHttpRequest(); http.open('get', 'recipe.json', true); http.send(); http.onload = function () { if (this.readyState == 4 && this.status == 200) { let products = JSON.parse(this.responseText); let output = ""; for (let item of products) { output += ` <div class="product"> <img src="${item.imageURL}" alt="${item.imageURL}"> <p class="title">${item.name}</p> </p> <button type="button" name="${item.name}" class="btn btn-primary modaltrigger" data-bs-toggle="modal" data-bs-target="#${item.name}"> Get Recipe </button> </div> <div class="modal fade" id="${item.name}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> </div> <div class="modal-body"> ${item.data} </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> `; } document.querySelector(".products").innerHTML = output; } } $(document).ready(function () { $(".modaltrigger").click(function () { var id = $(this).attr('name'); $('#'+id).modal(); }); });

Prueba esto.