Angular loop error

HI idk if i can ask questions here well i am creating an attendance system with asp.net core web api as the back end and angular at the front end ill provide the code
first this is the form to add attendance
<form [formGroup]="attendanceForm" (ngSubmit)="onSubmit()">
<section class="form-part">
<div class="row" id="form-part-row">
<div class="col" id="form-part-heading-col">Mark <br> Attendance</div>
<div class="col" id="form-part-date-col">
<input type="date" formControlName="date" id="date-input"
class="form-control">
</div>
</div>
</section>
<div *ngFor="let item of getclass">
<section class="student-list" *ngFor="let student of item.students">
<div class="row" id="student-list-row">
<div class="col" id="student-list-name-col">{{student?.name}} - {{student?.rollNumber}}</div>
<div class="col" id="student-list-mark-col">
<div class="btn-group">
<button class="btn btn-present" type="button" (click)="attendanceForm.patchValue({isPresent: true, studentId: student.id});">
<i class="fa-solid fa-hand" (click)="onPresentClick(student.id)" [ngStyle]="{ borderBottom: studentsClicked[student.id] === true ? '3px solid #d2f9a7' : 'none' }"></i>
</button>
<button class="btn btn-absent" type="button" (click)="attendanceForm.patchValue({isPresent: false, studentId: student.id});">
<i class="fa-solid fa-hand-fist" (click)="onAbsentClick(student.id)" [ngStyle]="{ borderBottom: studentsClicked[student.id] === false ? '3px solid #d2f9a7' : 'none' }"></i>
</button>
</div>
</div>
</div>
</section>
</div>
<section class="mark-button">
<div class="row">
<div class="col" id="submit-button-col">
<button class="btn btn-submit" type="submit">Mark Attendacne</button>
</div>
</div>
</section>
</form>
after that the form in ts file also the method to add attendance
`this.attendanceForm = this.fb.group({
date: ['', Validators.required],
classid: [this.classId, Validators.required],
studentId: ['', Validators.required],
isPresent: ['', Validators.required],
});
onSubmit(): void {
this.attendanceRecords = []; // clear the array

if (this.attendanceForm.invalid) {
  return;
}

this.getclass.forEach((cls) => {
  cls.students.forEach((student) => {
    const isPresent = this.attendanceForm.get(`isPresent`)?.value;
    const studentId = student.id;
    this.attendanceRecords.push({ studentId: studentId, isPresent: isPresent });
  });
});

console.log(JSON.stringify(this.attendanceRecords));

this.service.addAttendance(this.classId, this.attendanceForm.get('date')?.value, this.attendanceRecords).subscribe(() => {
  console.log('Attendance added successfully.');
  console.log(this.attendanceRecords);
}, error => {
  console.log(error);
});

}`
now the problem is when i post the form it submits ispresent value to ever student by the value later added for example if i select present button(true) for studentA and absent button(false) for StudentB and then submit the form the isPresent value for both the students is set to false i tried but cannot come up with a solution