How to display other information about the product using id?

Question

JavaScript

Hello! Guys, I ask for help with understanding on the following question!
I'm making a backend with mongoDB.
It is necessary to do:
1) Display a list of goods
2) When clicking on a product, go to the product page
As I see the solution to the first question (I omit the details, I speak abstractly)
On the first question! There is a request via fetch

fetch('http://localhost:3300/api/v5/products')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
     listOfPoduct(data);
           });

On the product listing page

function listOfPoduct ({ description, id, image, name, price }) {
  const card = document.createElement('div');
  card.insertAdjacentHTML('beforeend', `
    <img src=${image} alt=${name} class="card-image"/>
    <div class="card-text">
      <div class="card-heading">
        <h3 class="card-title card-title-reg">${name}</h3>
      </div>
      <div class="card-info">
        <p class="ingredients">${description}</p>
      </div>
      <div class="card-buttons">
        <a рука=”#” class=”addToProductPage”>переход на страницу товара</a>
        <strong class="card-price card-price-bold">${price} ₽</strong>
      </div>
    </div>
  `);
}

It seems to be correct, please correct me if something is wrong.
On the second question, go to the page of one product!
This is where there is a misunderstanding of how it works.
It is clear that such a function should take as a parameter, but:
a) how to pass it correctly and where, in an html file or through an event in js?
b) How to write this function correctly? How, knowing the id, refer to other fields of this particular product? I remind you that the data is in a json file
For example

{
            "id":"2121",
            "name":"Sup merzi",
            "count":"50g",
            "type":"[vegan, '']",
            "text":"Lorem impus",
            "ingrediente":"Lorem impus...",
            "valabil":"2121",
            "pret":"50",
          },

Answer 1

During the formation of the list of goods, set them the id of the goods, in the attribute of the same name, you can, you can in the date attribute, here it is more convenient. When clicking on a list element, read the given id and send a get request to the back specifying the product id or post request in the url, then you can simply write it in the body. On the back, process the id and send the required document from the database to the front.