I currently have a WordPress website, with Elementor Pro.

In this WordPress website, I have a page that displays a list of products at https://www.example.com/products, upon clicking on a specific product it redirects to https://www.example.com/details/74398732hkjahd (productId).

The way I have done the redirect is this.

var config = {ID:"", SearchURL:"", DetailURL:""};
    
    $(document).on("click", ".trademe-listing", function () {
        var id = $(this).find('p:eq(0)').text();
        var curList = new Array();
        var curImage = new Array();
        var curFeatures = new Array();
        for (i = 0; i < vehicles.length; i++) {
            if (vehicles[i].VehicleId == id) {
                curList.push(vehicles[i]);
                curImage.push(imagesVehicle[i]);
                curFeatures.push(features[i]);
                config.ID = vehicles[i].VehicleId;
            }
        }
        var list = JSON.stringify(curList);
        var img = JSON.stringify(curImage);
        var fea = JSON.stringify(curFeatures);
        sessionStorage.setItem("currentImages", img);
        sessionStorage.setItem("currentListing", list);
        sessionStorage.setItem("currentFeatures", fea);
        window.location = '../details/'+config.ID;
    });

However, the issue I'm having, is by doing this I get "The page can’t be found. It looks like nothing was found at this location."

I have a whole HTML page already made to display the content and all the data from the product ID at https://www.example.com/details. I'm just unsure on how to have the dynamic URL load content from a different page, and where I'm supposed to put the data for the specific product.

Any help would be greatly appreciated.