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

templates/calendar.html

@@ -41,16 +41,15 @@
         </div>
 
         <div class="mr-4">
-            <select id="workout-view-picker" data-te-select-init data-te-select-size="lg" name="view"
+            <select data-te-select-init data-te-select-size="lg" name="view"
                 hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
-                hx-vals='{"date": "{{ selected_date }}"}' hx-push-url="true">
+                hx-vals='{"date": "{{ selected_date }}"}' hx-push-url="true" _="init js(me)
+                    te.Select.getOrCreateInstance(me).setValue('{{ selected_view | safe }}')
+                end">
                 <option value="month" {% if selected_view=='month' %}selected{% endif %}>Month</option>
                 <option value="year" {% if selected_view=='year' %}selected{% endif %}>Year</option>
                 <option value="all">All</option>
             </select>
-            <script>
-                window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("{{ selected_view | safe }}"));
-            </script>
         </div>
     </div>