Switch to using hyperscript to initialise tailwind elements(select) and graphs(Plotly), this removes script tags and ids

templates/partials/topset.html

@@ -8,9 +8,11 @@
             }}</span>
         {% else %}
         <div class="w-full">
-            <select id="topset-exercise-select-{{ topset_id }}" data-te-select-init data-te-select-filter="true"
-                data-te-select-size="lg" name="exercise_id"
-                class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+            <select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" name="exercise_id"
+                class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                _="init js(me)
+                    te.Select.getOrCreateInstance(me).setValue('{{ exercise_id }}')
+                end">
                 {% for exercise in exercises|default([], true) %}
                 <option value="{{ exercise['ExerciseId'] }}">{{
                     exercise['Name']
@@ -18,9 +20,6 @@
                 {% endfor %}
             </select>
         </div>
-        <script>
-            window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#topset-exercise-select-{{ topset_id }}")).setValue("{{ exercise_id }}"));
-        </script>
         {% endif %}
     </td>
     <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">