move the closeModal function to the core template

core/templates/core/base.html

@@ -36,6 +36,22 @@
     </div>
     <script src="{% static 'core/js/htmx.js' %}"></script>
     {% django_htmx_script %}
+    <script>
+        function closeModal() {
+            var container = document.getElementById("htmx-modal-position")
+            var backdrop = document.getElementById("modal-backdrop")
+            var modal = document.getElementById("modal")
+
+            modal.classList.remove("show")
+            backdrop.classList.remove("show")
+
+            setTimeout(function () {
+                container.removeChild(backdrop)
+                container.removeChild(modal)
+            }, 200)
+        }
+    </script>
+
 </body>
 
 </html>

customers/templates/customers/customer_list.html

@@ -5,10 +5,10 @@
 {% if request.user.is_superuser %}
 <div class="row mb-3">
     <div class="col">
-        <button hx-get="{% url 'htmx_create_customer' %}" hx-target="#htmx-create-customer" class="btn btn-primary"
+        <button hx-get="{% url 'htmx_create_customer' %}" hx-target="#htmx-modal-position" class="btn btn-primary"
             _="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">Add Customer</button>
     </div>
-    <div class="col" id="htmx-create-customer"></div>
+    <div class="col" id="htmx-modal-position"></div>
 </div>
 {% endif %}
 <div class="row">
@@ -18,20 +18,5 @@
         </div>
     </div>
 </div>
-<script>
-    function closeModal() {
-        var container = document.getElementById("htmx-create-customer")
-        var backdrop = document.getElementById("modal-backdrop")
-        var modal = document.getElementById("modal")
-
-        modal.classList.remove("show")
-        backdrop.classList.remove("show")
-
-        setTimeout(function () {
-            container.removeChild(backdrop)
-            container.removeChild(modal)
-        }, 200)
-    }
-</script>
 
 {% endblock %}