HTML/CSS/JS Multiple pages of HTML in one file

I’m fairly new to HTML/CSS/JS (about 3 months now). I’m currently trying to create an e-commerce website but i’m having an issue with my products page. Whenever you click a product, It’s supposed to take you to a product details page showing things such as the name, price, a picture, and an add to cart button. I have a quite a few products (~25 products) so it wouldn’t be Ideal to create a .html file for every single product. So i wanted to know if it was possible to have all the product pages in one HTML file.

<div class="small-container single-product">
                <div class="row">
                    <div class="col-2 col-6" id="gpu1">
                        <img src="Images/strix3080.png" width="70%">
                    </div>
                    <div class="col-2 col-6" id="gpu1">
                        <p>Home / Products / ROG STRIX GeForce RTX 3080</p>
                        <h1>ASUS ROG STRIX GeForce RTX 3080 V2 10GB</h1>
                        <h4>&euro;800.00</h4>
                        <input type="number" value="1" max="5">
                        <a href="" class="btn add-cart">Add To Cart</a>
                        <h3>Specifications<i class="fa fa-indent" onclick="toggleSpecs()"></i></h3>
                        <br>
                        
                        <div id="specs">
                        <p>
                        Bus Standard: PCI Express 4.0<br>
                        Video Memory: 10GB GDDR6X<br>
                        Engine Clock: 1440 MHz (Base Clock)
                                      1935 MHz (Boost Clock)<br>
                        CUDA Core:    8704<br>
                        Memory Speed: 19 Gbps<br>
                        Interface:    Yes x2 (Native HDMI 2.1),
                                      Yes x3 (Native DisplayPort 1.4a),
                                      HDCP Support Yes (2.3)<br>
                        Resolution:   Digital Max Res. 7680 x 4320<br>
                        Dimensions:   12.53" x 5.51" x 2.27" Inch
                                      31.85 x 14.01 x 5.78 Centimeter<br>
                        Recommended PSU: 850W<br>
                        Power Connectors: 3 x 8-Pin
                        </p>
                        </div>
                    </div>
                </div>
            </div>

This is what contains all the details for the product details page and what is loaded when you click on a product’s picture.

This is how im making the picture clickable (This is in a seperate HTML file):

<div class="row">
                    <div onclick="window.location.href='product-details.html'" class="col-4">
                        <img src="Images/asus3080.png">
                        <h4>ASUS ROG STRIX GeForce RTX 3080 V2 10GB</h4>
                        <p>&euro;800.00</p>
                    </div>

I’ve tried looking up how to do this but most of them are to use plugins (which im not rlly sure how to use).

I would really appreciate some help.

Thank you.