Take a input value from input tag which is iterating on For loop

There is a Subscription plan which is iterating on the loop  cards are generated over loop where the user can add the Add-on's. On click of Add-on Button i am taking the input from the user to add more cloud accounts or increase the users for the application With Add-on's. As the input tag is iterating over array how to read the value from the input tag for different plans and i am checking the condition if the user checks the checkbox he can edit the input tag else it will be disabled. if i check any checkbox it is affecting all the checkbox and the input tag over the array.

My question is how to check the condition of the checkbox and enable the input tag and how to read the values for each different plans which is iterating over array.

HTML CODE:

 <div class="content content-full">
   <div class="container-fluid main-panel" [ngClass]="(globals.accountMenuDisplay === 'block')?'':'main_70'">
      <div class='pricing pricing-palden animated fadeIn' style="padding-top: 10px">
          <div *ngFor="let plans of ProductPlanDetailResponse;let i = index" [ngClass]="(i%2==0)?'pricing-item':'pricing-item pricing__item--featured'">
            <div class='pricing-deco' >
            <svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'>
              <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729&#x000A;   c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z' fill='#FFFFFF' opacity='0.6'></path>
              <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729&#x000A;  c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z' fill='#FFFFFF' opacity='0.6'></path>
              <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716&#x000A;  H42.401L43.415,98.342z' fill='#FFFFFF' opacity='0.7'></path>
              <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428&#x000A;   c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path>
            </svg>
            <div class='pricing-price'><span class='pricing-currency'>$</span>{{plans.recurringPrice}}
              <span class='pricing-period'>/ month</span>
            </div>
            <h3 class='pricing-title'>{{plans.planName}}</h3>
            </div>

            <h4  style="font-size: 2em; color:#00373e; margin-top: -30px; z-index:11" class="pricing-price">Features</h4>
              <ul  style="padding: 10px;list-style: none;">
                <li *ngFor="let features of plans.planDescription;let j = index" style="padding: 5px">
                    {{features}}
                </li>
              </ul>
              <div [ngStyle]="{'display':addAddons}">
                <div >
                  <input type ="checkbox" (change)="enableCloudAccounts()" >
                  <input class="custom-input"  id="cloudAccount{{j}}" type="text" [disabled]="noOfCloudAccount==false ? true : null" placeholder=" # of Cloud Account" style="margin: 5px">
                </div>
                <div >
                    <input type ="checkbox" (change)="enableUsers()" >
                    <input class="custom-input" type="text" [disabled]="noOfUsers==false ? true : null" placeholder=" # of Users" style="margin: 5px">
                  </div>
              </div>
              <button class='pricing-action' (click)="enableAddons()">{{addonText}}</button>
              <button class='pricing-action'>Choose plan</button>

          </div>
          </div>


    </div>

TypScript File :

      noOfCloudAccount : any;
      noOfUsers : any;
      addAddons: any;
      addonText: any;
ngOnInit() {
    this.noOfCloudAccount= false;
    this.noOfUsers = false;
    this.addAddons = 'none';
    this.addonText = 'Add Addons';
}
enableCloudAccounts(){
  this.noOfCloudAccount = !this.noOfCloudAccount;
}
enableUsers(){
  this.noOfUsers = !this.noOfUsers;
}
enableAddons(){
  this.addAddons = 'block';
}