fix: go back button has always the right behaviour

model-viewer/index.html

@@ -109,11 +109,15 @@
         </div>
       </model-viewer>
       <script>
-        const back1 = document.getElementById("back-one");
-        back1.addEventListener("click", () => {
-          document.querySelector("#welcome-page").style.display = "flex";
-          document.querySelector("#model-one").remove();
-        });
+        function addBackButtonEventListener() {
+          const backButtonNode = document.getElementById("back-one");
+          backButtonNode.addEventListener("click", () => {
+            document.querySelector("#welcome-page").style.display = "flex";
+            document.querySelector("#model-one").remove();
+          });
+        }
+
+        addBackButtonEventListener();
       </script>
     </template>
     <template id="template-two">
@@ -137,11 +141,15 @@
         </div>
       </model-viewer>
       <script>
-        const back2 = document.getElementById("back-two");
-        back2.addEventListener("click", () => {
-          document.querySelector("#welcome-page").style.display = "flex";
-          document.querySelector("#model-two").remove();
-        });
+        function addBackButtonEventListener() {
+          const backButtonNode = document.getElementById("back-two");
+          backButtonNode.addEventListener("click", () => {
+            document.querySelector("#welcome-page").style.display = "flex";
+            document.querySelector("#model-two").remove();
+          });
+        }
+
+        addBackButtonEventListener();
       </script>
     </template>
     <div class="container background" id="welcome-page">