diff --git a/aleksis/apps/paweljong/forms.py b/aleksis/apps/paweljong/forms.py
index 1189c48ccbf864ca6f89b6139e7829d98e1c43b6..c42d5b8f3b833ac300038e5285d9af75b9b4c4ee 100644
--- a/aleksis/apps/paweljong/forms.py
+++ b/aleksis/apps/paweljong/forms.py
@@ -505,7 +505,7 @@ class PersonGroupFormPerson(forms.Form):
 
 class EventCheckpointForm(forms.Form):
     class Media:
-        js = ("https://unpkg.com/html5-qrcode", "js/paweljong/checkpoint.js")
+        js = ("https://unpkg.com/html5-qrcode", "js/paweljong/qrscanner.js", "js/paweljong/checkpoint.js")
 
     layout = Layout(
         "comment", "use_latlon",
diff --git a/aleksis/apps/paweljong/static/js/paweljong/checkpoint.js b/aleksis/apps/paweljong/static/js/paweljong/checkpoint.js
index db9a7e5b86ef64bcaabeafb6c3c8bbcdc8928402..6ca40adbb2ae228eba2cd658acbb457850864521 100644
--- a/aleksis/apps/paweljong/static/js/paweljong/checkpoint.js
+++ b/aleksis/apps/paweljong/static/js/paweljong/checkpoint.js
@@ -1,5 +1,3 @@
-const scanner = new Html5Qrcode("reader");
-
 function getCheckpointCoords() {
     navigator.geolocation.getCurrentPosition(setCheckpointCoords);
 }
@@ -13,23 +11,8 @@ function setCheckpointCoords(position) {
     }, 3000);
 }
 
-function onScanSuccess(decodedText, decodedResult) {
-    scanner.stop();
-    $("[name='username']").val(decodedText);
-    $("[name='username']").closest("form").submit();
-}
-
-function onScanError(error) {
-    console.warn(`Code scan error: ${error}`);
-}
-
 $(document).ready(function($) {
     if (navigator.geolocation) {
         getCheckpointCoords();
     }
-
-    let cameraConfig = { facingMode: "environment" };
-    let scannerConfig = { fps: 10, qrbox: {width: 250, height: 250} };
-
-    scanner.start(cameraConfig, scannerConfig, onScanSuccess);
 });
diff --git a/aleksis/apps/paweljong/static/js/paweljong/qrscanner.js b/aleksis/apps/paweljong/static/js/paweljong/qrscanner.js
new file mode 100644
index 0000000000000000000000000000000000000000..85b5e4521e41a3c8592a7c00f91b3b5f5c4d00a8
--- /dev/null
+++ b/aleksis/apps/paweljong/static/js/paweljong/qrscanner.js
@@ -0,0 +1,20 @@
+const scannerDivId = "qr-reader";
+const scannerDiv = $("div#" + scannerDivId);
+const scanner = new Html5Qrcode(scannerDivId);
+
+function onScanSuccess(decodedText, decodedResult) {
+    let targetId = scannerDiv.data("target-input");
+    let target = $("[name='" + targetId + "']");
+
+    scanner.stop();
+
+    target.val(decodedText);
+    target.closest("form").submit();
+}
+
+$(document).ready(function($) {
+    let cameraConfig = { facingMode: "environment" };
+    let scannerConfig = { fps: 10, qrbox: {width: 250, height: 250} };
+
+    scanner.start(cameraConfig, scannerConfig, onScanSuccess);
+});
diff --git a/aleksis/apps/paweljong/templates/paweljong/event/checkpoint.html b/aleksis/apps/paweljong/templates/paweljong/event/checkpoint.html
index c683717b394f33014d9078a660a9792524c712a3..deef5ccf5adf4104a031397c249169490c7064fa 100644
--- a/aleksis/apps/paweljong/templates/paweljong/event/checkpoint.html
+++ b/aleksis/apps/paweljong/templates/paweljong/event/checkpoint.html
@@ -16,7 +16,7 @@
     {% include "core/partials/save_button.html" %}
   </form>
 
-  <div id="reader"></div>
+  <div id="qr-reader" data-target-input="username"></div>
 
   {{ form.media.js }}