Fix dfs and Element's id

src/App.tsx

@@ -16,6 +16,7 @@ interface IAppState {
   configuration: Configuration,
   MainContainer: Container | null,
   SelectedContainer: Container | null
+  Counters: Record<string, number>
 }
 
 class App extends React.Component<IAppProps> {
@@ -32,7 +33,8 @@ class App extends React.Component<IAppProps> {
         MainContainer: {} as AvailableContainer
       },
       MainContainer: null,
-      SelectedContainer: null
+      SelectedContainer: null,
+      Counters: {}
     };
   }
 
@@ -97,12 +99,19 @@ class App extends React.Component<IAppProps> {
       throw new Error(`[AddContainer] Object type not found. Found: ${type}`);
     }
 
-    const parent = this.state.SelectedContainer;
+    const newCounters = Object.assign({}, this.state.Counters);
+    if (newCounters[type] === null ||
+      newCounters[type] === undefined) {
+      newCounters[type] = 0;
+    } else {
+      newCounters[type]++;
+    }
 
-    const depth: number = Container.getDepth(parent) + 1;
+    const parent = this.state.SelectedContainer;
+    const count = newCounters[type];
     const container = new Container({
       parent,
-      id: `${type}-${depth}-${parent.props.children.length.toString()}`,
+      id: `${type}-${count}`,
       x: 0,
       y: 0,
       width: properties?.Width,
@@ -119,7 +128,8 @@ class App extends React.Component<IAppProps> {
     const newMainContainer = new Container(Object.assign({}, this.state.MainContainer.props));
 
     this.setState({
-      MainContainer: newMainContainer
+      MainContainer: newMainContainer,
+      Counters: newCounters
     });
   }