Why is a javascript script not running on one wordpress page, but working fine o

I’ve made a dice roller, implementing the code I wrote here.

I added it to a shortcut function in wordpress functions.php , and was all working fine. Just checked it again, and it works perfectly on one page (scroll to the bottom), but doesn’t on another, and I’ve got no idea why!

Any thoughts?

HTML:

    <div class="dicerollingwrapper">
  <div class="dicebox dicetransform">
    <svg id="dicesvg" viewBox="0 0 200 200" xmlns="https://www.w3.org/2000/svg">
      <style> .dicetextsecond {font: 70px serif; fill: white; fill-opacity:0;} 
      .dicetextfirst {font: 70px serif; fill: white;}    
      </style>
    <path class="dicetospin"  d="M38.8,-69C44.4,-64,38.9,-41.6,40.7,-27.2C42.6,-12.8,51.8,-6.4,52.6,0.5C53.4,7.3,45.7,14.6,39,20.7C32.3,26.7,26.6,31.5,20.3,38.2C14,45,7,53.6,0.2,53.2C-6.5,52.9,-13.1,43.4,-21.5,37.9C-30,32.4,-40.4,30.9,-45.6,25.2C-50.8,19.6,-50.9,9.8,-48.4,1.4C-45.8,-6.9,-40.8,-13.8,-37.7,-23C-34.5,-32.2,-33.2,-43.8,-27.3,-48.5C-21.3,-53.3,-10.7,-51.2,3,-56.4C16.6,-61.6,33.2,-73.9,38.8,-69Z" transform="translate(100,100)" />
      <text x="50%" y ="60%" text-anchor="middle" class="dicetextsecond">13</text>
      <text x="50%" y ="60%" text-anchor="middle" class="dicetextfirst">?</text> 

  </svg>
</div>

CSS:

.dicebox {
  /* background-color: #ff8D9B; */
  height: 300px;
  width: 300px;
}

.dicetransform {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}

.dicetransform-active {
  animation-name: rotate;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

@keyframes rotate {
  100% {transform:rotate(4320deg); }
} 

.dicetexttransform {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}

.dicetexttransform1-active {
  animation: hidecolor 4s forwards;
}

@keyframes hidecolor {
  0% { fill: white; }
  100% {fill-opacity:0;}
}

.dicetexttransform2-active {
  animation: showcolor 4s forwards;
}

@keyframes showcolor {
  0% {fill-opacity:0;}
  100% {fill-opacity:1;fill: white;}
}

#dicebutton {width:300px; height:50px; background-color:#ff8888; font-size: 24px; border:none; border-radius: 15px;transition-duration: 0.4s; font-weight:bold;}
#dicebutton:hover {background-color:#000; color:#ff8888}

JS:

JQuery("#dicebutton").click(function() {
JQuery('.dicetransform').toggleClass('dicetransform-active'); 

  // generate random
  let x = Math.floor((Math.random() * 13) + 1);
  //find SVG elements
  var numberdiceSVG = document.querySelector('#dicesvg .dicetextsecond');
  var hidediceSVG = document.querySelector('#dicesvg .dicetextfirst');
  //set number
  numberdiceSVG.textContent = x;
  // reset if animated already done
  if(numberdiceSVG.getAttribute('class') === "dicetextsecond dicetexttransform dicetexttransform2-active") {
    numberdiceSVG.setAttribute('class', 'dicetextsecond dicetexttransform');
    hidediceSVG.setAttribute('class', 'dicetextfirst dicetexttransform');
  }
  else {
    hidediceSVG.setAttribute('class', 'dicetextfirst dicetexttransform dicetexttransform1-active');

numberdiceSVG.setAttribute('class', 'dicetextsecond dicetexttransform dicetexttransform2-active');
  }

var hidediceSVG = document.querySelector('#dicesvg .dicetextfirst');

  });

The page I need help with: [log in to see the link]