Fix multiple buttons

app.py

@@ -331,6 +331,7 @@ def admin():
         photos=photos,
         accent_color=config["appearance"]["accent_color"],
         config=config,
+        nonce=g.csp_nonce,
     )
 
 @app.route("/admin/logout")

templates/admin.html

@@ -203,8 +203,8 @@
                     <td class="editable" data-field="iso">{{ photo.iso }}</td>
                     <td>{{ photo.width }}x{{ photo.height }}</td>
                     <td>
-                        <button id="save-btn">Save</button>
+                        <button class="save-btn">Save</button>
-                        <button class="delete-btn" id="delete-btn">Delete</button>
+                        <button class="delete-btn">Delete</button>
                     </td>
                 </tr>
                 {% endfor %}
@@ -244,7 +244,7 @@
                             <label for="about.profile_image">Profile Image:</label>
                             <div style="display: flex; align-items: center; gap: 1rem;">
                                 <img id="profile-preview" src="/static/profile.jpeg" alt="Profile" style="width: 100px; height: 100px; object-fit: cover; border-radius: 50%;">
-                                <input type="file" id="profile_image_upload" accept="image/jpeg,image/png" style="flex: 1;">
+                                <input type="file" class="profile-image-upload" accept="image/jpeg,image/png" style="flex: 1;">
                             </div>
                         </div>
                         <div class="form-group">
@@ -284,7 +284,8 @@
             });
         });
 
-        function saveChanges(button) {
+        function saveChanges(event) {
+            const button = event.target;
             const row = button.closest('tr');
             const photoId = row.dataset.id;
             const updatedData = {};
@@ -314,8 +315,9 @@
             });
         }
 
-        function deletePhoto(button) {
+        function deletePhoto(event) {
             if (confirm('Are you sure you want to delete this photo?')) {
+                const button = event.target;
                 const row = button.closest('tr');
                 const photoId = row.dataset.id;
 
@@ -338,10 +340,16 @@
             }
         }
 
-        document.getElementById('delete-btn').addEventListener('click', deletePhoto);
+        document.querySelectorAll('.delete-btn').forEach(button => {
-        document.getElementById('save-btn').addEventListener('click', saveChanges);
+            button.addEventListener('click', (event) => deletePhoto(event));
+        });
 
-        document.getElementById('profile_image_upload').addEventListener('change', async (e) => {
+        document.querySelectorAll('.save-btn').forEach(button => {
+            button.addEventListener('click', (event) => saveChanges(event));
+        });
+
+        document.querySelectorAll('.profile-image-upload').forEach(input => {
+            input.addEventListener('change', async (e) => {
                 const file = e.target.files[0];
                 if (!file) return;
 
@@ -364,6 +372,7 @@
                     alert('Error uploading profile image: ' + error);
                 }
             });
+        });
 
         document.getElementById('configForm').addEventListener('submit', async (e) => {
             e.preventDefault();