下面是我的JavaScript代码，它能够显示使用fetch API的用户列表。
我想点击一个用户，并使用JavaScript和fetch API在模型中显示他的信息。
我无法为模型添加标记。
我尝试在for each循环中创建模式，但这只适用于列表中的第一个用户。

const url = "https://randomuser.me/api/?results=12 ";

var userView = document.querySelector(".gallery");

fetch(url)
    // Convert the data into JavaScript
    .then((response) => response.json())
    // Now we can use the data
    .then((data) => {
    // Log out the data
    //console.log(data);
    insertUsers(data);
    })
    // Log out any errors
    .catch((error) => console.error(error));
    
function insertUsers(users) {
    users.results.forEach((user) => {
        userView.insertAdjacentHTML(
          "beforeend",
          `<div class="card">
            <div class="card-img-container">
                <img class="card-img" src="${user.picture.large}" alt="profile picture">
            </div>
            <div class="card-info-container">
                <h3 id="name" class="card-name cap">${user.name.first}</h3>
                <p class="card-text">${user.email}</p>
                <p class="card-text cap">${user.location.city}, ${user.location.city}</p>
            </div>
        </div>`
        );

        document.querySelector('.card-img').addEventListener('click', function(){
            console.log(user.name.first);
        })
    });

}

字符串
我试图打开一个模型上的用户的图像的点击。
下面是我想要显示的模型的标记：

<div class="modal-container">
                <div class="modal">`enter code here
                    <button type="button" id="modal-close-btn" class="modal-close-btn"><strong>X</strong></button>
                    <div class="modal-info-container">
                        <img class="modal-img" src="https://placehold.it/125x125" alt="profile picture">
                        <h3 id="name" class="modal-name cap">name</h3>
                        <p class="modal-text">email</p>
                        <p class="modal-text cap">city</p>
                        <hr>
                        <p class="modal-text">(555) 555-5555</p>
                        <p class="modal-text">123 Portland Ave., Portland, OR 97204</p>
                        <p class="modal-text">Birthday: 10/21/2015</p>
                    </div>
                </div>

型