How can we hide certain DOM element with checkbox in nested Angular Reactive Form approach

I am trying to show or hide the respective skillBox Element when we check/uncheck the checkbox. The issue is here, When I am doing so, All the skillBox are getting hide/show in the FormArray. Could you please help me to show or hide only the respective FormArray Element?

Here is the code.

 <div class="row box">
    <div class="col-xs-12">
        <h4>Reactive Test Form</h4>
        <button class="btn btn-info" type="button" (click)="fnOnAddProfile()">Add Profile</button>
    <hr> 
    <form [formGroup]="ourForm" (ngSubmit)="fnSave()">
     <div formArrayName="apps">
       <div class="inner-box" *ngFor="let app of ourForm.get('apps').controls; let ind = index" >
      <div [formGroupName]="ind" >
        <div formGroupName="common">
          <div class="form-group">
          <label for="name">Name</label>
          <input type="text" class="form-control" formControlName="name" />
        </div>
        <div class="form-group">
          <label for="name">Profession</label>
          <input type="text" class="form-control" formControlName="profession" />
        </div>
        <label for="skillcheckbox">
          <input type="checkbox" formControlName="enableSkill"
          (change)="fnGetCheckBoxVal(app.get('common').get('enableSkill').value, ind)" /> Want to add Skill?
        </label>
        </div>
        <div *ngIf="isSkill" id="skillBox">
          <div class="row" formArrayName="skills">
            <div class="col-xs-12">
              <div class="form-group" *ngFor="let control of getSkills(app); let i = index">
                <input type="text" class="form-control" [formControlName]="i">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <h5>Please add your skills</h5>
              <button class="btn btn-primary" type="button" (click)="fnOnAddSkill(app,ind)">Add Skill</button>
            </div>
          </div>
        </div>
      </div>
       </div>
     </div>
      <hr>
      <div class="form-group">
        <button class="btn btn-success" type="submit">Save</button>
        &nbsp;
        <button class="btn btn-danger">Clear</button>
      </div>

    </form>
  </div>
</div>

Here is the typescript code

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl, FormArray, Validators } from "@angular/forms";
@Component({
  selector: "app-reactive-forms",
  templateUrl: "./reactive-forms.component.html",
  styleUrls: ["./reactive-forms.component.css"]
})
export class ReactiveFormsComponent implements OnInit {
  ourForm: FormGroup;
  isSkill: boolean = false;
  defaultApps: FormGroup;
  constructor() { }

  ngOnInit() {

    this.defaultApps = new FormGroup({
      common: new FormGroup({
        name: new FormControl(null),
        profession: new FormControl(null),
        enableSkill: new FormControl(false)
      }),
      skills: new FormArray([])
    });
    this.initForm();
    //  this.fnGetCheckBoxVal();
  }

  initSkills() {
    return   new FormGroup({
      common: new FormGroup({
        name: new FormControl(null),
        profession: new FormControl(null),
        enableSkill: new FormControl(false)
      }),
      skills: new FormArray([])
    });
  }



  initForm() {
    this.ourForm = new FormGroup({
      "apps": new FormArray([
        this.initSkills()
      ])
    });
   // (this.ourForm.get('apps') as FormArray).push(this.defaultApps);

  }
  // get formSkills() {
  //   // return (<FormArray>this.ourForm.get("skills")).controls;
  //   return (app.get('skills') as FormArray).controls;
  // }
  getSkills(control: FormArray) {
return (control.get('skills') as FormArray).controls;
  }

  fnOnAddSkill(app: FormControl, ind: number) {
    console.log(ind);
    const control = new FormControl(null, Validators.required);
    const myForm = app.get("skills") as FormArray;
    myForm.push(control);
  }
  fnSave() {
    console.log(this.ourForm);
    // console.log(this.ourForm.get('common').get('enableSkill'));
  }
  fnGetCheckBoxVal(value, index) {
    //  //.get('common').get("enableSkill")
    //  (this.ourForm.get('apps') as FormArray).valueChanges.subscribe(value => {
    //    console.log(value);
    //     value ? (this.isSkill = true) : (this.isSkill = false);
    //   });
    console.log(value, index);
    value ? (this.isSkill = true) : (this.isSkill = false);
  }
  fnOnAddProfile() {
    (this.ourForm.get('apps') as FormArray).push(this.initSkills());
  }
}

Any help will be appreciated. Thanks in advance.