separating html into base and unique url files

app/static/budget_categories.js

@@ -0,0 +1,14 @@
+const delButtons = document.getElementsByClassName('del-button');
+
+async function deleteCategory(id){
+    var result = await fetch(`/delete_budget_category/${id}`, {method:'POST'});
+    var data = await result.json();
+    document.getElementById(`${id}-row`).remove();
+}
+document.addEventListener("DOMContentLoaded", (event) => {
+    for(let i = 0; i < delButtons.length; i++){
+        delButtons[i].addEventListener('click', e => {
+            deleteCategory(parseInt(e.target.id))
+        })
+    }
+  });

app/static/homepage.js

@@ -1,11 +1,5 @@
-const delButtons = document.getElementsByClassName('del-button');
 const reassignButtons = document.getElementsByClassName('reassign-button');
 
-async function deleteCategory(id){
-    var result = await fetch(`/delete_budget_category/${id}`, {method:'POST'});
-    var data = await result.json();
-    document.getElementById(`${id}-row`).remove();
-}
 function startEditMode(id){
     for(let i = 0; i < reassignButtons.length; i++){
         reassignButtons[i].disabled = true;
@@ -40,11 +34,6 @@ function startEditMode(id){
 }
 
 document.addEventListener("DOMContentLoaded", (event) => {
-    for(let i = 0; i < delButtons.length; i++){
-        delButtons[i].addEventListener('click', e => {
-            deleteCategory(parseInt(e.target.id))
-        })
-    }
     for(let i = 0; i < reassignButtons.length; i++){
         reassignButtons[i].addEventListener('click', e => {
             startEditMode(parseInt(e.target.id))

app/templates/base.html

@@ -45,6 +45,5 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="{{url_for('.static', filename='index.js')}}"></script>
 </body>
 </html>

app/templates/budget_categories.html

@@ -41,4 +41,5 @@
         </div>
     </div>
 </main>
+<script src="{{url_for('.static', filename='budget_categories.js')}}"></script>
 {% endblock content %}

app/templates/homepage.html

@@ -57,7 +57,7 @@
                             </tr>
                         </thead>
                         <tbody>
-                            {% for li in all_line_items %}
+                            {% for li in last_month_lines %}
                                 <tr id="{{li[0].id}}-row">
                                     <th scope="row">{{li[0].id}}</th>
                                     <th scope="row">{{li[0].parent_line_item_id}}</th>
@@ -78,4 +78,5 @@
         </div>
     </div>
 </main>
+<script src="{{url_for('.static', filename='homepage.js')}}"></script>
 {% endblock content %}