Unable to delete selected items on click event from iteration of items

Question

I have the saved data of iteration like.. .component.ts

public saveHealthyHabits() {
    let isCategoryExist = false;
    let categoryDetails = {
      category: this.clinicalNoteForm.controls.category.value,
      habitDetails: this.healthyHabits.value,
      showDetails: true,
    };
    if (this.customHabitList.length) {
      categoryDetails.habitDetails = categoryDetails.habitDetails.concat(
        this.customHabitList
      );
      this.customHabitList = [];
    }

    if (this.selectedCategoryDetails) {
      this.selectedCategoryDetails.forEach((selectedCategory) => {
        if (selectedCategory.category === categoryDetails.category) {
          isCategoryExist = true;
          selectedCategory.habitDetails = selectedCategory.habitDetails.concat(
            categoryDetails.habitDetails
          );
        }
      });
    }
    if (!this.selectedCategoryDetails || !isCategoryExist) {
      this.selectedCategoryDetails.push(categoryDetails);
    }

    this.clinicalNoteForm.patchValue({
      category: null,
    });
    this.healthyHabits.clear();
  }

public deletedata(){

// need to add the logic here
}

In the above code I have saved data of enteringsome items .and after that I need to delete the data from iteration based on clicking of the particular item not based on the index(suppose if I have cat1,cat2,cat3,cat4 and if I want to delete the cat4 when we clcik it hasto be delete but for me even If I clcik delete cat3 it is deleting the first one only instead of clciked one)

.component.html

 <ng-container *ngFor="let categoryDetail of selectedCategoryDetails">
      <div class="__header">
        <div>
          <b>{{ categoryDetail.category }}</b>
        </div>
         </div>

      <div
        class="clinical-note__category__details"
        *ngIf="categoryDetail.showDetails">
      
        <ul>
          <li class="habit-list"
            *ngFor="let habits of categoryDetail.habitDetails" >
        
            <div class="target-details">
              <b>{{ clinicalNoteLabels.target }}: </b
              ><span class="habit-list__value">{{ habits.target }}</span>
            </div>
          </li>
        </ul>
        <div class="habit-footer">
       <span class="m-l-10"  
          [popoverOnHover]="false"
          type="button"
          [popover]="customHabitPopovers"><i class="fa fa-trash-o" ></i> Delete</span>
        </div>
        <div class="clinical-note__popoverdelete">

        <popover-content #customHabitPopovers [closeOnClickOutside]="true">
          <h5>Do you want to delete this habit?</h5>
          <button
          class="btn-primary clinical-note__save"  (click)="deletedata(habits);customHabitPopovers.hide()">yes </button>
       
        </popover-content></div>
      </div>
    </ng-container>

.spec.ts

 beforeEach(() => {
      component.selectedCategoryDetails = [
        {
          category: "Drink More Water",
          habitDetails: [
            { trigger: "wake up", target: "drink a glass of water" },
          ],
          showDetails: false,
        },
        {
          category: "Drink More Water",
          habitDetails: [
            { trigger: "wake up", target: "drink a glass of water" },
          ],
          showDetails: true,
        },
      ];
    });

here my requirement is when we clcik on delete button to delete particular item it will show some popup with yes button(implemented the code above) when we clickon yes it has to delete the itemfrom the array.

I have tried multipleways but not working as expected cananyone help me on the same