send request to server to send product detail page when product card is clicked

I am creating a product page that show all available product in the form of card. This image show’s how products is displayed on the products page I want a functionality that whenever user click’s on any product card from the available product cards a request is to be made to server to open productshowcase page with complete product detailImages show’s the file i need to render in responce. I tried some method to do that, but none worked well.

The code for product card is

<div class="product-display-c">
                    <div class="product-card-holding-c">
                        <!--  -->
                        <% for (let i=0; i < data.length; i++) {%>
                            <div id="<%= data[i].id%>" class="product-card-c">
                                <div class="product-image-c">
                                    <img class="product-card-image" src="<%= data[i].images[0]%>"
                                        alt="random image" />
                                </div>
                                <div class="product-detail-c">
                                    <p class="product-name">
                                        <%= data[i].p_name%>
                                    </p>
                                    <p class="product-sp">Rs. <%= data[i].selling_price%>
                                    </p>
                                    <p class="product-mrp">M.R.P: Rs. <span>
                                            <%= data[i].mrp%>
                                        </span> </p>
                                    <p class="product-discount">
                                        <%= data[i].mrp - data[i].selling_price%> off
                                    </p>
                                    <p class="product-quality">Quality verified</p>
                                </div>
                            </div>
                            <% }%>
                    </div>
                </div>

This code create cards as per data received from database.

after that I created a javascript code to send request to server to open productshowcase page with complete product detail. The code is like

document.querySelectorAll('.product-card-c').forEach((div) => {
  div.addEventListener('click', function(event) {
    console.log(event.target.closest('.product-card-c').id);
    const selectedId =event.target.closest('.product-card-c').id;
    fetch(`/products/${selectedId}`)
          .then(response => console.log(response.text()))
  });
});

this code send the id of clicked card to the server. The server side code to handle this is like
app.get('/products/:id', async function(req, res) { try { const selectedId = await db.query(SELECT * FROM products WHERE id=${req.params.id}); res.render("productshowcase.ejs", {product :selectedId.rows}); } catch (err) { console.log(err); } });

I don’t know what is the issue but nothing happen when i click the card.

Although the server response when i try to hit browser url section with url localhost:3000/products/2 the server open productshowcase page without CSS apllied to it and with lots of error in console like
“Failed to load resource: the server responded with a status of 404 (Not Found)
great-value-trademart.png:1
Failed to load resource: the server responded with a status of 404 (Not Found)
header.js:1

   Failed to load resource: the server responded with a status of 404 (Not Found)

1:1 Refused to execute script from ‘http://localhost:3000/products/jscript/header.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.
catagory-2.jpg:1

   Failed to load resource: the server responded with a status of 404 (Not Found)"

I am totally stucked. Can anyone help me to find where is the error. Thanks in advance.

I tried searching for the correct method to send request to the server but failed to find the right one