diff --git a/js/src/board.js b/js/src/board.js
new file mode 100644
index 0000000..231ae5c
--- /dev/null
+++ b/js/src/board.js
@@ -0,0 +1,43 @@
+
+const loadBoard = (board) => {
+    const getSquare = square => board.getElementsByClassName(square)[0];
+    const clearSelection = () => {
+        board.classList.remove("moveSelection");
+        board.querySelectorAll(".source").forEach(element => {
+            element.classList.remove("source")
+        });
+        board.querySelectorAll(".movePossible").forEach(element => {
+            element.classList.remove("movePossible")
+        });
+    };
+    const enterSelection = (moves) => {
+        board.classList.add("moveSelection");
+        for (const move of moves) {
+            getSquare(move.target).classList.add("movePossible");
+            getSquare(move.source).classList.add("source");
+        }
+    }
+    const moveSelected = (move) => {
+        // TODO
+    };
+
+    board.querySelectorAll(".piece.hasMoves").forEach(element => {
+        element.addEventListener("click", event => {
+            clearSelection();
+            const moves = element.getAttribute("data-moves").split(";").map(move => ({
+                encoded: move,
+                source: move.split(",")[0].split("-")[2],
+                target: move.split(",")[1]
+            }));
+            enterSelection(moves);
+            event.stopPropagation();
+        });
+    });
+    board.addEventListener("click", () => {
+        clearSelection();
+    });
+}
+
+export const loadBoards = () => {
+    document.querySelectorAll(".board.interactive").forEach(loadBoard);
+};
\ No newline at end of file
diff --git a/js/src/index.js b/js/src/index.js
index e4731a7..f8f6145 100644
--- a/js/src/index.js
+++ b/js/src/index.js
@@ -1,3 +1,8 @@
 import htmx from 'htmx.org';
+import {loadBoards} from './board';
 
-window.htmx = htmx;
\ No newline at end of file
+window.htmx = htmx;
+
+window.addEventListener("load", () => {
+    loadBoards();
+});
\ No newline at end of file
diff --git a/src/View/fragments/board.php b/src/View/fragments/board.php
index 844e496..c8f3ce4 100644
--- a/src/View/fragments/board.php
+++ b/src/View/fragments/board.php
@@ -60,49 +60,3 @@ function getImageForPice(Piece $piece): string {
         }
     ?>
 </div>
-<?php
-if ($interactive) {
-?>
-<script>
-window.addEventListener("load", () => {
-    const board = document.getElementById("board<?= $boardId ?>");
-    const getSquare = square => board.getElementsByClassName(square)[0];
-    const clearSelection = () => {
-        board.classList.remove("moveSelection");
-        board.querySelectorAll(".source").forEach(element => {
-            element.classList.remove("source")
-        });
-        board.querySelectorAll(".movePossible").forEach(element => {
-            element.classList.remove("movePossible")
-        });
-    };
-    const enterSelection = (moves) => {
-        board.classList.add("moveSelection");
-        for (const move of moves) {
-            getSquare(move.target).classList.add("movePossible");
-            getSquare(move.source).classList.add("source");
-        }
-    }
-    const moveSelected = (move) => {
-        // TODO
-    };
-
-    board.querySelectorAll(".piece.hasMoves").forEach(element => {
-        element.addEventListener("click", event => {
-            clearSelection();
-            const moves = element.getAttribute("data-moves").split(";").map(move => ({
-                encoded: move,
-                source: move.split(",")[0].split("-")[2],
-                target: move.split(",")[1]
-            }));
-            enterSelection(moves);
-            event.stopPropagation();
-        });
-    });
-    board.addEventListener("click", () => {
-        clearSelection();
-    });
-});
-</script>
-<?php
-}