can you check again no click event are working

time-tracking.html

@@ -212,28 +212,49 @@
             
             timeHistoryBody.appendChild(row);
         });
-
         // Clock In/Out functionality
-        const clockInBtn = document.querySelector('.bg-primary');
-        const clockOutBtn = document.querySelector('.bg-gray-200');
-        const breakStartBtn = document.querySelector('.bg-secondary');
-        const breakEndBtn = document.querySelector('.bg-gray-200 + .bg-gray-200');
+        document.addEventListener('DOMContentLoaded', function() {
+            const clockInBtn = document.querySelector('.bg-primary');
+            const clockOutBtn = document.querySelector('.flex-1.bg-gray-200');
+            const breakStartBtn = document.querySelector('.bg-secondary');
+            const breakEndBtn = document.querySelectorAll('.flex-1.bg-gray-200')[1];
 
-        clockInBtn.addEventListener('click', () => {
-            alert('Clocked in at ' + new Date().toLocaleTimeString());
-        });
+            if (clockInBtn) {
+                clockInBtn.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    alert('Clocked in at ' + new Date().toLocaleTimeString());
+                    clockInBtn.disabled = true;
+                    clockOutBtn.disabled = false;
+                });
+            }
 
-        clockOutBtn.addEventListener('click', () => {
-            alert('Clocked out at ' + new Date().toLocaleTimeString());
-        });
+            if (clockOutBtn) {
+                clockOutBtn.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    alert('Clocked out at ' + new Date().toLocaleTimeString());
+                    clockOutBtn.disabled = true;
+                    clockInBtn.disabled = false;
+                });
+            }
 
-        breakStartBtn.addEventListener('click', () => {
-            alert('Break started at ' + new Date().toLocaleTimeString());
-        });
+            if (breakStartBtn) {
+                breakStartBtn.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    alert('Break started at ' + new Date().toLocaleTimeString());
+                    breakStartBtn.disabled = true;
+                    breakEndBtn.disabled = false;
+                });
+            }
 
-        breakEndBtn.addEventListener('click', () => {
-            alert('Break ended at ' + new Date().toLocaleTimeString());
+            if (breakEndBtn) {
+                breakEndBtn.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    alert('Break ended at ' + new Date().toLocaleTimeString());
+                    breakEndBtn.disabled = true;
+                    breakStartBtn.disabled = false;
+                });
+            }
         });
-    </script>
+</script>
 </body>
 </html>