Woocommerce main product images not showing on single page site

Question

I have embedded 3 woocommerce product pages on a single page site. Each product inside a different div with a separate ID. (1 product inside 1 div) I wrote JS that includes image buttons that when clicked hides/shows each of the 3 divs containing each product. Using css I hide the first 2 products for the JS to work correctly. The JS replaces the product that is showing with the product corresponding to the button clicked. So on and so on... The user only sees one product at a time which is what I want.

The issue is; The 2 initial hidden divs containing the 2 products do not show the large woocommerce product image when these products are showing.

After debugging by trying a different theme, turning on and off plugins. The problem is the css that hides the 2 divs. When I comment out the below css, all 3 products show at the same time (which is what I don't want) however the large product images show and function correctly.

CSS that hides the first 2 products upon opening the site #x, #xx {display: none;}

JS

<div class="xx"><a onclick="myFunctionxx()" href="#xx"><img src="https://fire.krankgolf.com/wp-content/uploads/2022/03/krank-golf-fire-graph-XX-1239.jpg" alt="Krank Golf Formula Fire XX Super High COR Driver swing speed graph purchase online"></a></div>
<script>
function myFunctionxx() {
  var x = document.getElementById("xx");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "block";
  }
    var x = document.getElementById("x");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "none";
  }
    var x = document.getElementById("pro");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "none";
  }
}
</script>
<div class="x"><a onclick="myFunctionx()" href="#x"><img src="https://fire.krankgolf.com/wp-content/uploads/2022/03/krank-golf-fire-graph-X-1239.jpg" alt="Krank Golf Formula Fire X High COR Driver swing speed graph purchase online"></a></div>
<script>
function myFunctionx() {
  var x = document.getElementById("x");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "block";
  }
  var x = document.getElementById("pro");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "none";
  }
    var x = document.getElementById("xx");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "none";
  }
}
</script>
<div class="pro"><a onclick="myFunctionpro()" href="#pro"><img src="https://fire.krankgolf.com/wp-content/uploads/2022/03/krank-golf-fire-graph-pro-1239.jpg" alt="Krank Golf Formula Fire Pro USGA Conforming Driver swing speed graph purchase online"></a></div>
<script>
function myFunctionpro() {
  var x = document.getElementById("pro");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "block";
  }
    var x = document.getElementById("x");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "none";
  }
    var x = document.getElementById("xx");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "none";
  }
}
</script>

I know this is long winded. My apologies.. The question is.. Is there a way to hide the 2 product divs upon opening the site while allowing the large product images to display?

Site URL: https://fire.krankgolf.com

Go to the red graph in the middle, click either the Formula Fire XX, X or Pro buttons to see the products. (The XX and X products are the ones not showing the large images)

Thank you