diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx
index a48ce82ed2a042..de45322d04987c 100644
--- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx
+++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx
@@ -6,7 +6,7 @@
 
 import React, { FC } from 'react';
 
-import { htmlIdGenerator, EuiTabbedContent } from '@elastic/eui';
+import { EuiTabbedContent } from '@elastic/eui';
 import { Optional } from '@kbn/utility-types';
 import { i18n } from '@kbn/i18n';
 
@@ -26,6 +26,23 @@ function getItemDescription(value: any) {
   return value.toString();
 }
 
+/**
+ * Creates a deterministic number based hash out of a string.
+ */
+export function stringHash(str: string): number {
+  let hash = 0;
+  let chr = 0;
+  if (str.length === 0) {
+    return hash;
+  }
+  for (let i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr; // eslint-disable-line no-bitwise
+    hash |= 0; // eslint-disable-line no-bitwise
+  }
+  return hash < 0 ? hash * -2 : hash;
+}
+
 interface Item {
   title: string;
   description: any;
@@ -162,7 +179,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
     position: 'left',
   };
 
-  const tabId = htmlIdGenerator()();
+  const tabId = stringHash(item.id);
 
   const tabs = [
     {