<div *ngFor="let feeModel of feesModel; let i = index">
                            <mat-form-field>
                                <input matInput [name]="'feeName' + (i + 1)" type="text" placeholder="Fee Name" [formControl]="redTuitionFormGroup.controls['feeName' + (i + 1)]">
                            </mat-form-field>
                            <mat-form-field>
                                <input matInput [name]="'feeAmount' + (i + 1)" type="number" placeholder="Fee Amount ($)" [formControl]="redTuitionFormGroup.controls['feeAmount' + (i + 1)]">
                            </mat-form-field>
                            <mat-form-field>
                                <mat-select [formControl]="redTuitionFormGroup.controls['feePerStudentOrFamily' + (i + 1)]" placeholder="Per student/family">
                                    <mat-option *ngFor="let type of perStudFamily" [value]="type.val">
                                        {{type.typeName}}
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>
                            <div class="grades-checkbox-container" style="max-width: 1000px;">
                                <h4>Apply to grades:
                                    <mat-checkbox [ngModelOptions]="{standalone: true}" [name]="'allGrades' + (i + 1)" (change)="setAllMonths();" [(ngModel)]="feeModel.isAll" style="margin-right: 10px;">All</mat-checkbox>
                                </h4>

                                <mat-checkbox [ngModelOptions]="{standalone: true}" (change)="checkIfAllMonths();" [name]="grade.gradeID + 'g1'" *ngFor="let grade of feeModel.gradesModel" [(ngModel)]="grade.isApplied" style="margin-right: 10px;">{{grade.gradeName}}
                                </mat-checkbox>
                            </div>
                        </div>