my-app/src/components/booking/InlineModalExtendedBookingForm.jsx

@@ -82,6 +82,21 @@ export function InlineModalExtendedBookingForm({
 		}
 	}, [showConfirmation]);
 
+	// Effect to ensure only the correct component shows confirmation
+	useEffect(() => {
+		// Only show confirmation if this component is for the currently selected time slot
+		if (booking.selectedStartIndex !== startTimeIndex && showConfirmation) {
+			setShowConfirmation(false);
+		}
+	}, [booking.selectedStartIndex, startTimeIndex, showConfirmation]);
+
+	// Effect to reset confirmation on component mount if not the selected time
+	useEffect(() => {
+		if (booking.selectedStartIndex !== startTimeIndex) {
+			setShowConfirmation(false);
+		}
+	}, []); // Only run on mount
+
 	// Generate end time options based on available hours
 	const endTimeOptions = [];
 	const disabledOptions = {};
@@ -171,8 +186,8 @@ export function InlineModalExtendedBookingForm({
 		}
 	};
 
-	// Show confirmation page if user pressed save
-	if (showConfirmation) {
+	// Show confirmation page if user pressed save AND this is the active time slot
+	if (showConfirmation && booking.selectedStartIndex === startTimeIndex) {
 		return (
 			<div 
 				ref={confirmationRef}

my-app/src/components/ui/TimeCardContainer.jsx

@@ -181,7 +181,7 @@ export function TimeCardContainer({ addBooking }) {
 										} else if (useInlineModalExtended) {
 											elements.push(
 												<InlineModalExtendedBookingForm
-													key={`form-${slotIndex}`}
+													key={`form-${slotIndex}-${booking.selectedStartIndex}`}
 													startTimeIndex={booking.selectedStartIndex}
 													hoursAvailable={booking.selectedEndIndex - booking.selectedStartIndex}
 													endTimeIndex={booking.selectedEndIndex}