Resolve "Manually enrolling students: button broken"

What does this mr do?

Solves enrol button for manually enrolling students into an exam slot by making it clickable again.

Actions taken to fix bug

Every time a slot is selected, make the current z-index 1 higher than all the other slots such that the selection form is clickable.

Does this MR meet the acceptance criteria?

• I have added a changelog entry to reflect the significant changes I made and the bug I fixed.
• A test was created to test the bug.
• I have updated the documentation accordingly.
• I adhere to the style guide.

Closes #315 (closed)

src/main/resources/templates/lab/view.html

@@ -257,7 +257,7 @@
                 Total # of pending requests: <span>[[${requests.size()}]]</span>
                 <div class="col-sm-8 mb-3">
                     <div class="row">
-                        <div class="col-sm-4" th:each="slot : ${timeslots}"
+                        <div class="col-sm-4 slot" th:each="slot : ${timeslots}"
                              th:value="${slot.getOpensAt()}">
                             <span style="cursor:pointer" href="#"
                                   class="badge badge-pill toggler" data-toggle="tooltip"
@@ -425,6 +425,14 @@
     <script type="text/javascript">
         $(".chosen-select").chosen({disable_search_threshold: 1, width: '33%'});
     </script>
+    <script type="text/javascript">
+        $(function () {
+            $(".slot").on("click", function() {
+               $(".slot").css({"z-index": "0"});
+               $(this).css({"z-index": "1"});
+            });
+        });
+    </script>
 </section>
 </body>
 </html>