Fix adding participants by identifier to course

Closes #737 (closed) . Because the person table is created once and then updated dynamically based on what the user types, adding the click listeners for the buttons for adding participants on DOMContentLoaded does not work, as the table only "loads" once. Adding a method for onclick solves it.

src/main/resources/templates/edition/view/people-search.html

@@ -40,7 +40,13 @@
                             <td th:text="${person.getEmail()}"></td>
                             <td th:text="${person.getNumber()}"></td>
                             <td class="fit-content">
-                                <button class="button button p-less" th:data-username="${person.getUsername()}">Add</button>
+                                <button
+                                    type="button"
+                                    class="button p-less"
+                                    th:data-username="${person.getUsername()}"
+                                    onclick="addParticipant(this.getAttribute('data-username'))">
+                                    Add
+                                </button>
                             </td>
                         </tr>
                     </th:block>
@@ -48,17 +54,14 @@
             </table>
             <td colspan="5" th:if="${people != null && people.isEmpty()}">There were no results found for this identifier!</td>
             <script>
-                document.addEventListener("DOMContentLoaded", () => {
-                    document.querySelectorAll("[data-username]").forEach(button => button.addEventListener("click", () => {
-                        const form = document.getElementById("createParticipantForm");
-                        const typeInput = form.querySelector("select[name='type']");
+                function addParticipant(username) {
+                    const form = document.getElementById("createParticipantForm");
+                    const typeInput = form.querySelector('select[name="type"]');
 
-                        if (typeInput.value === "") return;
-
-                        form.querySelector("input[name='identifier']").value = username;
-                        form.submit();
-                    });
-                });
+                    if (typeInput.value === "") return;
+                    form.querySelector('input[name="identifier"]').value = username;
+                    form.submit();
+                }
             </script>
         </th:block>
     </body>