diff --git a/x-pack/plugins/session_view/public/components/session_view/index.tsx b/x-pack/plugins/session_view/public/components/session_view/index.tsx
index 18accecb36dd5..4eaa905f9852d 100644
--- a/x-pack/plugins/session_view/public/components/session_view/index.tsx
+++ b/x-pack/plugins/session_view/public/components/session_view/index.tsx
@@ -4,6 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import { v4 as uuidv4 } from 'uuid';
 import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
   EuiEmptyPrompt,
@@ -98,6 +99,7 @@ export const SessionView = ({
   const [currentJumpToCursor, setCurrentJumpToCursor] = useState(jumpToCursor);
   const [currentJumpToEntityId, setCurrentJumpToEntityId] = useState(jumpToEntityId);
   const [currentJumpToOutputEntityId, setCurrentJumpToOutputEntityId] = useState('');
+  const sessionViewId = useMemo(() => `session-view-uuid-${uuidv4()}`, []);
 
   const styles = useStyles({ height, isFullScreen });
 
@@ -399,7 +401,7 @@ export const SessionView = ({
       <EuiResizableContainer>
         {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
           detailPanelCollapseFn.current = () => {
-            togglePanel?.('session-detail-panel', { direction: 'left' });
+            togglePanel?.(sessionViewId, { direction: 'left' });
           };
 
           return (
@@ -458,7 +460,7 @@ export const SessionView = ({
 
               <EuiResizableButton css={styles.resizeHandle} />
               <EuiResizablePanel
-                id="session-detail-panel"
+                id={sessionViewId}
                 initialSize={30}
                 minSize="320px"
                 paddingSize="none"