diff --git a/frontend/src/components/ListComponent.tsx b/frontend/src/components/ListComponent.tsx
index b7fd1d7..6c35ca2 100644
--- a/frontend/src/components/ListComponent.tsx
+++ b/frontend/src/components/ListComponent.tsx
@@ -22,7 +22,7 @@ export const ListComponent = React.memo((props: ListComponentProps) => {
   }, [props]);
 
   return (
-    <div className={'listComponent'} id={parentPath.concat(name)}>
+    <div className={'listComponent'} id={parentPath.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}
diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx
index 6de7ca3..d89c63e 100644
--- a/frontend/src/components/NumberComponent.tsx
+++ b/frontend/src/components/NumberComponent.tsx
@@ -137,7 +137,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
 
     // Set the cursor position after the component re-renders
     const inputElement = document.getElementsByName(
-      parentPath.concat(name)
+      parentPath.concat('.' + name)
     )[0] as HTMLInputElement;
     if (inputElement && cursorPosition !== null) {
       inputElement.setSelectionRange(cursorPosition, cursorPosition);
@@ -287,7 +287,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
             type="text"
             value={inputString}
             disabled={readOnly}
-            name={parentPath.concat(name)}
+            name={parentPath.concat('.' + name)}
             onKeyDown={handleKeyDown}
             onBlur={handleBlur}
             className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
diff --git a/frontend/src/components/StringComponent.tsx b/frontend/src/components/StringComponent.tsx
index a6c29c2..ff17d88 100644
--- a/frontend/src/components/StringComponent.tsx
+++ b/frontend/src/components/StringComponent.tsx
@@ -55,7 +55,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
   };
 
   return (
-    <div className={'stringComponent'} id={parentPath.concat(name)}>
+    <div className={'stringComponent'} id={parentPath.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}