Angular cdk, multiple drag and drop issue

Question

Here I have these drag-and-drop columns which work fine right now, but when I click on the add button it generates the entire section which is displayed in the image below. the main problem I am facing is that when I regenerate the section and drag the elements every draggable element in each section gets affected. How can I fix this issue?

This is the code : HTML

<div *ngIf="derivedColumn === 'yes'">
                <div class="card derivedColumn" *ngFor="let item of cloneDerived; let i = index">
                    <div class="btn-wrap">
                        <button class="addDerivedColumnSecBtn add-btn" (click)="addDiv()"><span
                                class="pi pi-plus-circle"></span></button>
                        <button class="addDerivedColumnSecBtn remove-btn" (click)="removeDiv(i)"
                            *ngIf="derivedCount > 1"><span class="pi pi-minus-circle"></span></button>
                    </div>
                    <div class="row">
                        <div class="col">
                            <label for="formGroupExampleInput">Derived Column Name</label>
                            <input type="text" class="form-control" placeholder="First name">
                        </div>
                        <div class="col">
                            <label for="formGroupExampleInput">Derived Method</label>
                            <p-dropdown [options]="methods" optionLabel="name" placeholder="Select a Method"
                                styleClass="derivedMethod"></p-dropdown>
                        </div>
                        <div class="col">
                            <label for="formGroupExampleInput">Seperator</label>
                            <input type="text" class="form-control" placeholder="Last name">
                        </div>
                    </div>
                    <div class="drag-column">
                        <div class="field-list text-center">
                            <p>Drag and Drop the column</p>
                            <div cdkDropList #newTodoList="cdkDropList" [cdkDropListData]="newTodo"
                                [cdkDropListConnectedTo]="[newDoneList, newCompletedList]" class="example-list"
                                (cdkDropListDropped)="newDrop($event, i)">
                                <div class="example-box" *ngFor="let item of newTodo" cdkDrag [cdkDragData]="item">
                                    {{ item }}
                                </div>
                            </div>
                        </div>

                        <div class="input-column">
                            <b>New Input Column</b>
                            <div cdkDropList #newDoneList="cdkDropList" [cdkDropListData]="newDone"
                                [cdkDropListConnectedTo]="[newTodoList, newCompletedList]" class="example-list"
                                (cdkDropListDropped)="newDrop($event, i)">
                                <div class="example-box" *ngFor="let item of newDone" cdkDrag [cdkDragData]="item">
                                    {{ item }}
                                </div>
                            </div>
                        </div>

                        <div class="target-column">
                            <b>New Target Column</b>
                            <div cdkDropList #newCompletedList="cdkDropList" [cdkDropListData]="newCompleted"
                                [cdkDropListConnectedTo]="[newTodoList, newDoneList]" class="example-list"
                                (cdkDropListDropped)="newDrop($event, i)">
                                <div class="example-box" *ngFor="let item of newCompleted" cdkDrag [cdkDragData]="item">
                                    {{ item }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

TypeScript

import { Component, ViewChild } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag',
  templateUrl: './drag.component.html',
  styleUrls: ['./drag.component.css'],
})
export class DragComponent {
  @ViewChild('todoList') todoList: any;
  @ViewChild('doneList') doneList: any;
  @ViewChild('completedList') completedList: any;
  rawData={
    "fields": [
        {
            "name": "PassengerId",
            "type": "integer",
            "null_count": 0
        },
        {
            "name": "Survived",
            "type": "integer",
            "null_count": 0
        },
        {
            "name": "Pclass",
            "type": "integer",
            "null_count": 0
        },
        {
            "name": "Name",
            "type": "string",
            "null_count": 0
        },
        {
            "name": "Sex",
            "type": "string",
            "null_count": 2
        },
        {
            "name": "Check_Out",
            "type": "string",
            "null_count": 1
        }
    ],
    "type": "struct"
}
fields = this.rawData.fields;
secondField = this.rawData.fields;
todo = this.rawData.fields.map(field => field.name);
done: string[] = [];
completed: string[] = [];
derivedColumn:string = 'yes';
methods = [
  { name: 'Concat'},
  { name: 'Dummy'}
];
derivedObj = {dragDropColumns:this.secondField, droppedFields:[]}
derivedCount: number = 1;
cloneDerived: any[] = [this.derivedObj];



newTodo= this.rawData.fields.map(field => field.name);
newDone: string[] = [];
newCompleted: string[] = [];



  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      if (event.previousContainer.data === this.todo) {
        transferArrayItem(
          event.previousContainer.data,
          event.container.data,
          event.previousIndex,
          event.currentIndex
        );
      } else {
        const movedItem = event.previousContainer.data[event.previousIndex];
        this.todo.splice(event.currentIndex, 0, movedItem);
        event.previousContainer.data.splice(event.previousIndex, 1);
      }
    }
  
    if (event.container.data === this.completed && event.container.data.length > 1) {
      const removedItem = event.container.data.splice(0, 1)[0];
      this.todo.splice(0, 0, removedItem);
    }
  }

  addDiv() {
    const newDiv = {
      derivedColumn: [...this.cloneDerived[0].derivedColumn],
      newTodo: [],
      newDone: [],
      newCompleted: [],
    };

    this.cloneDerived.push(newDiv);
    this.derivedCount++;
    
  }

  removeDiv(index: number) {
    if (this.cloneDerived.length > 1) {
      this.cloneDerived.splice(index, 1);
      this.derivedCount--;
    }
  }

  newDrop(event: CdkDragDrop<string[]>, divIndex: number) {
    const currentDiv = this.cloneDerived[divIndex];

    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      if (event.previousContainer.data) {
        if (!event.container.data) {
          event.container.data = []; 
        }
  
        transferArrayItem(
          event.previousContainer.data,
          event.container.data,
          event.previousIndex,
          event.currentIndex
        );
      } else {
        console.error('Data arrays are undefined:', event.previousContainer.data, event.container.data);
      }
    }

    if (
      event.container.data === currentDiv.newCompleted &&
      event.container.data.length > 1
    ) {
      const removedItem = event.container.data.splice(0, 1)[0];
      currentDiv.newTodo.splice(0, 0, removedItem);
    }
  }

}