dynamic row creation affecting other created dropdown values angular 6

I have 3 drop downs primary, secondary,ternary categories, each dependent on each other, Initially I have 3 drop downs below that I have one button " add more" , after clicking "add more" again drops will come below the ones earlier have, now the question is first row drop down selection is working fine , after clicking "add more" the second row drop down selection is not working , means it changes the value of already selected first row of the second category same with the ternary category. first I all load all the primary category, based on primary id i will fetch secondary categories, based on the secondary category id i will fetch ternary category. please me with this.

HTML CODE

                <div class="row Space_2">
                        <div class="col-md-4">
                                <select class="Textfield_2" id="primary_category_id"  formControlName="primary_category_id" (change)="getSecondCategory($event.target.value)" name="primaryServices" required>
                                    <option value="">Primary Service</option>
                                    <option *ngFor="let primaryCat of primaryCategory" [value]="primaryCat.id">{{primaryCat.name}}</option>

                                </select>
                        </div>

                        <div class="col-md-4">
                            <select class="Textfield_2" id="secondary_category_id" formControlName="secondary_category_id" (change)="getTernaryCategory($event.target.value)" name="secondaryServices" required>
                                    <option value="">Secondary Service</option>
                                    <option *ngFor="let secondCat of secondCategory" [value]="secondCat.id">{{secondCat.name}}</option>
                                </select>
                        </div>
                        <div class="col-md-4">
                            <select class="Textfield_2" id="ternary_category_id"  formControlName="ternary_category_id" name="secondaryServices" required>
                                    <option value="">Ternary Service</option>
                                    <option *ngFor="let ternaryCat of ternaryCategory" [value]="ternaryCat.id">{{ternaryCat?.name}}</option>
                                </select>
                        </div>
                    </div>
                    <div *ngFor="let k of addmoreServices let i = index">
                    <div class="row Space_2">
                        <div class="col-md-4">
                                <select class="Textfield_2" id="primary_category"   (change)="getSecondCategory($event.target.value)" name="{{k.primary_category}}" required>
                                    <option value="">Primary Service</option>
                                    <option *ngFor="let a of primaryCategory" [value]="a.id">{{a?.name}}</option>

                                </select>
                        </div>

                        <div class="col-md-4">
                            <select class="Textfield_2" id="secondary_category" (change)="getTernaryCategory($event.target.value)"  name="{{k.secondary_category}}" required>
                                    <option value="">Secondary Service</option>
                                    <option *ngFor="let b of secondCategory" [value]="b.id">{{b?.name}}</option>
                                </select>
                        </div>
                        <div class="col-md-4">
                            <select class="Textfield_2" id="secondary_category" (change)="getTerId($event.target.value)" name="{{k.ternary_category}}" required>
                                    <option value="">Ternary Service</option>
                                    <option *ngFor="let c of ternaryCategory" [value]="c.id">{{c?.name}}</option>
                                </select>
                        </div>
                    </div>
                </div>

TypeScript Code:

      getPrimaryCategory() {

     this.http.get('http://localhost:3000/api/getPrimaryCategory' ,{

         })
           .subscribe(
             res => {

               this.primaryCategory = res['data'];
               console.log(this.primaryCategory);


           },
             err => {
             }
           );
     }

     getSecondCategory(id,i) {
       this.primcatId = id;
       this.http.get('http://localhost:3000/api/getsecondarycatdataforternary/'+id ,{

            })
              .subscribe(
                res => {

                  this.secondCategory = res['data'];
                  console.log(this.secondCategory);


              },
                err => {
                }
              );
        }

        getTernaryCategory(id) {
          console.log("The ternary ID is",id);
          this.secondId = id;
          this.http.get('http://localhost:3000/api/getternaryCatforServices/'+id ,{

               })
                 .subscribe(
                   res => {

                     this.ternaryCategory = res['data'];
                     console.log(this.ternaryCategory);


                 },
                   err => {
                   }
                 );
           }

getTerId(id){
  this.terid = id;
  console.log("THE TERNARY ID IS",this.terid);
}
  addMoreServices() {
this.addmoreServices.push({ primary_category:this.primcatId , secondary_category:this.secondId  ,ternary_category: this.terid });
console.log("the add more services",this.addmoreServices);
  }