Cfrgtkky

I am making an e-commerce website and taking care of the front-end part of it. I am using Fetch for handling the http part. For starters, I made a get request on page load, for the very first page(home page).

window.addEventListener("load", catgpage());

function catgpage()

{

    fetch('https://jsonplaceholder.typicode.com/users/?id=5&id=6&id=7&id=8')

        .then(response => response.json())

        .then(data => {

            console.log(data.user.id);

            let outPut = '';

            data.forEach(function (user) {

                const {id, name, username} = user;

                outPut +=

                    `<div class="tn col-xs-6 col-sm-4 col-md-3">

                <div class="thumbnail">

                    <a href="#" id="openprodpages${id}"><img src="Images/Untitled.jpg"></a>

                    <div class="caption text-center">

                        <h4>${name}</h4>

                        <p>${username}</p>

                        <span class="badge">${id}</span>

                        <div class="icons">

                            <a href="#"><i class="far fa-heart" aria-hidden="true"></i></a>

                            <a href="#"><i class="fa fa-shopping-cart "></i></a>

                        </div>

                    </div>

                </div>

            </div>`;

                document.querySelector(".featured .item").innerHTML = outPut;

            });

        })

}

Now, in the above code, I want to click the anchor tag(with id="openprodpages${id}") so that new page opens and another get request is made to the server. How do I do that? I have tried a lot many ways but can not seem to come up with a solution. Nesting a fetch request is not helping either- maybe I am doing it wrong. Can someone please tell me the how to solve this issue?