In Ionic accordin list showing duplicate values


#1
<ion-list *ngFor="let d of data" (click)="toggleDetails(d)" >
   <ion-list-header class="item"  padding-left ><ion-icon color="primary" item-right [name]="d.iconp"></ion-icon>
      {{d.Product}}
   </ion-list-header>

      <div *ngIf="d.showDetails" class="show"><br>

<ion-item >
<ion-label  class="l">Type:</ion-label>
   <ion-select  text-left [(ngModel)]="Type">
        <ion-option  *ngFor="let type of skuType" >{{type}}</ion-option>
  </ion-select>
                      </ion-item> 
       
  <ion-item  >
    <ion-label  class="l">Size:</ion-label>

   <ion-select [(ngModel)]="Size" >
        <ion-option  *ngFor="let size of skuSize">{{size}}</ion-option>
  </ion-select>
  </ion-item>
             
 <ion-row>
  <ion-col text-center>
<button  ion-button (click)=addToCart(d.Product,Type,Size) round>Add</button>
  </ion-col>
</ion-row>
         </div>
 
  </ion-list>

TS

   this.skuSize= ['Large', 'Medium', 'Small'];
this.product=['A','B']
this.type=['x','y','z']

//function cloasing or showing div
 toggleDetails(data) {

if (data.showDetails){

    data.showDetails = false;
    data.iconp = 'ios-add-circle-outline';
}
else{
 data.showDetails = true;
    data.iconp = 'ios-remove-circle-outline';
 
}

whatever value i am selecting in one list is showing that value in second select option list .

what could be the way to complete this task