diff --git a/@theme/markdoc/components.tsx b/@theme/markdoc/components.tsx
index 2123100073..6fb6bdf090 100644
--- a/@theme/markdoc/components.tsx
+++ b/@theme/markdoc/components.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useLocation } from 'react-router-dom';
 // @ts-ignore
 import dynamicReact from '@markdoc/markdoc/dist/react';
 import { usePageSharedData, useTranslate } from '@portal/hooks';
@@ -27,6 +28,7 @@ export function IndexPageItems() {
 
 export function InteractiveBlock(props: { children: React.ReactNode; label: string; steps: string[] }) {
   const stepId = idify(props.label);
+  const { pathname } = useLocation();
 
   return (
     <div className="interactive-block" id={'interactive-' + stepId}>
@@ -51,7 +53,7 @@ export function InteractiveBlock(props: { children: React.ReactNode; label: stri
             })}
           </ul>
         </div>
-        <div className="interactive-block-ui">{dynamicReact(props.children, React, {})}</div>
+        <div className="interactive-block-ui" key={pathname}>{dynamicReact(props.children, React, {})}</div>
       </div>
     </div>
     );
@@ -102,7 +104,7 @@ export function Badge(props: {
     }
 
     let childstrings = ""
-    
+
     React.Children.forEach(props.children, (child, index) => {
       if (typeof child == "string") {
         childstrings += child
@@ -125,7 +127,7 @@ export function Badge(props: {
     let badge_url = `https://img.shields.io/badge/${left}-${right}-${color}.svg`
 
     if (props.href) {
-      return (    
+      return (
         <Link to={props.href}>
           <img src={badge_url} alt={childstrings} className="shield" />
         </Link>
diff --git a/static/js/interactive-tutorial.js b/static/js/interactive-tutorial.js
index dadc55db1d..92484e6d54 100644
--- a/static/js/interactive-tutorial.js
+++ b/static/js/interactive-tutorial.js
@@ -62,7 +62,7 @@ function tl(key) {
  */
 function idify(s) {
  // s = s.replace(/[^\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]/gu, '').trim().toLowerCase()
- s = s.replace(/([^\w]|[\s-])/gu, '').trim().toLowerCase() 
+ s = s.replace(/([^\w]|[\s-])/gu, '').trim().toLowerCase()
  s = s.replace(/[\s-]+/gu, '-')
   if (!s) {
     s = "_";
@@ -176,8 +176,8 @@ function show_error(block, message) {
  * use the generated credentials instead of the placeholder EXAMPLE_ADDR and
  * EXAMPLE_SECRET.
  */
-const EXAMPLE_ADDR = "rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe"
-const EXAMPLE_SECRET = "s████████████████████████████"
+var EXAMPLE_ADDR = "rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe"
+var EXAMPLE_SECRET = "s████████████████████████████"
 function setup_generate_step() {
 
   $("#generate-creds-button").click( async (event) => {
@@ -629,6 +629,14 @@ async function show_log(block, msg) {
   block.find(".output-area").append(msg)
 }
 
+function onCurrentRouteLoaded(callback) {
+  const currentPath = window.location.pathname;
+  window.onRouteChange(() => {
+    if (window.location.pathname === currentPath) {
+      callback()
+    }
+  });
+}
 
 window.onRouteChange(() => {
   disable_followup_steps()
diff --git a/static/js/tutorials/create-amm.js b/static/js/tutorials/create-amm.js
index a7caa8b6e9..abed7beebe 100644
--- a/static/js/tutorials/create-amm.js
+++ b/static/js/tutorials/create-amm.js
@@ -1,7 +1,7 @@
 // 1. Generate
 // 2. Connect
 // The code for these steps is handled by interactive-tutorial.js
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
     const EXPLORER = $("#connect-button").data("explorer")
 
diff --git a/static/js/tutorials/enable-no-freeze.js b/static/js/tutorials/enable-no-freeze.js
index 0fe80c6fac..e0819282f6 100644
--- a/static/js/tutorials/enable-no-freeze.js
+++ b/static/js/tutorials/enable-no-freeze.js
@@ -1,7 +1,7 @@
 // 1. Generate
 // 2. Connect
 // The code for these steps is handled by interactive-tutorial.js
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
   // 3. Send AccountSet --------------------------------------------------------
   $("#send-accountset").click( async (event) => {
diff --git a/static/js/tutorials/enact-global-freeze.js b/static/js/tutorials/enact-global-freeze.js
index 99e8a41c72..52ad267ea8 100644
--- a/static/js/tutorials/enact-global-freeze.js
+++ b/static/js/tutorials/enact-global-freeze.js
@@ -1,7 +1,7 @@
 // 1. Generate
 // 2. Connect
 // The code for these steps is handled by interactive-tutorial.js
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
   // 3. Send AccountSet to Start the Freeze ------------------------------------
   // also 6. Send AccountSet to End the Freeze.
diff --git a/static/js/tutorials/freeze-individual-line.js b/static/js/tutorials/freeze-individual-line.js
index 168cf6879d..368ac09f97 100644
--- a/static/js/tutorials/freeze-individual-line.js
+++ b/static/js/tutorials/freeze-individual-line.js
@@ -55,7 +55,7 @@ window.after_connect.push(async () => {
   trust_line_setup_done = true
 })
 
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
 
 
diff --git a/static/js/tutorials/issue-a-token.js b/static/js/tutorials/issue-a-token.js
index 231420d9a9..1624631feb 100644
--- a/static/js/tutorials/issue-a-token.js
+++ b/static/js/tutorials/issue-a-token.js
@@ -87,7 +87,7 @@ function domain_to_hex(s) {
   return result.toUpperCase()
 }
 
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
   setup_2x_generate_step()
 
   $("#cold-domain-text").keyup( (event) => {
diff --git a/static/js/tutorials/require-destination-tags.js b/static/js/tutorials/require-destination-tags.js
index 4cfb27b218..f2059dc44d 100644
--- a/static/js/tutorials/require-destination-tags.js
+++ b/static/js/tutorials/require-destination-tags.js
@@ -1,7 +1,7 @@
 // 1. Generate
 // 2. Connect
 // The code for these steps is handled by interactive-tutorial.js
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
   // 3. Send AccountSet --------------------------------------------------------
   $("#send-accountset").click( async (event) => {
diff --git a/static/js/tutorials/send-xrp.js b/static/js/tutorials/send-xrp.js
index 9429df2f16..4599c99cf6 100644
--- a/static/js/tutorials/send-xrp.js
+++ b/static/js/tutorials/send-xrp.js
@@ -2,7 +2,7 @@
 // 1. Connect
 // The code for these steps is handled by interactive-tutorial.js
 
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
 // 2. Prepare Transaction ------------------------------------------------------
 $("#prepare-button").click( async function(event) {
diff --git a/static/js/tutorials/trade-in-the-dex.js b/static/js/tutorials/trade-in-the-dex.js
index 92e26455db..10642d341e 100644
--- a/static/js/tutorials/trade-in-the-dex.js
+++ b/static/js/tutorials/trade-in-the-dex.js
@@ -3,7 +3,7 @@
 
 // Get Credentials, Connect steps handled by the snippet
 
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
 // Look Up Offers --------------------------------------------------------------
 
diff --git a/static/js/tutorials/use-tickets.js b/static/js/tutorials/use-tickets.js
index 7313305ad0..e45162fff8 100644
--- a/static/js/tutorials/use-tickets.js
+++ b/static/js/tutorials/use-tickets.js
@@ -1,7 +1,7 @@
 // 1. Generate
 // 2. Connect
 // The code for these steps is handled by interactive-tutorial.js
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
   const LLS_OFFSET = 75 // Expire unconfirmed transactions after about ~5 min
 
 // 3. Check Sequence Number