Q:

Issue with posting the sibling value to API (Angular 5)

I'm developing a school management system.
I have a division list which i'm getting from a web service, next to every division list there is add button if i want to add a grade inside the selected division, the issue is when i click on any add button it always add inside the first division.
for ex: if i clicked on the add button next to the third division, it will post inside the first division.
I want the new grade to be posted inside the selected division to add.
I tried to give the division button the value of the division.id, the id is showing when i click inspect, but it's not being posted to the web service, always gives me undefined or posts only the first division ID.
My component HTML:
<div class="col-md-12 " *ngFor="let division of divisionList, let i = index">
    <form #create='ngForm'>
        <button *ngIf="division" class="choose-list arrow-onclick1" data-toggle="collapse" data-target="#list1" id="getId" name="division_id"
                [(ngModel)]="division.id" value="{{division.id}}">
            {{division.name}}
            <i class="fa fa-arrow-right pull-right arrow-down-onclick1" aria-hidden="true" style="margin-top: 12px"></i>
        </button>
        <!--Modal -->
        <div class="modal fade" id="exampleModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Enter grade name...</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="text" name="name" ngModel #name="ngModel" placeholder="Name...">
                        <!--<input type="text" name="division_id" placeholder="{{division.id}}" 
                        value="{{division.id}}" #division_id="ngModel" ngModel  >-->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close
                        </button>
                        <button type="button" class="btn btn-primary"
                                (click)="createGrade(create)">Create grade
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>

My component TS:
division_id: number[] = [];

createGrade(form: NgForm){
    this.division_id = $(this).closest('#getId').val();
    let data = form.value;
    let formData: FormData = new FormData();
    formData.append('grades[0][name]', data.name);
    formData.append('grades[0][division_id]', this.division_id);
    this.http.post(this.url, formData)
        .subscribe(response => {
            console.log(response);
        }, (err: HttpErrorResponse) => {
            console.log(err);
        });
}

Screenshot that may help:
Division view (the grades are the dummy text inside)

Link to the divisions API (POST).
Link to the divisions API (GET).
Kindly if anything is not clear enough tell me as this project is very important to me, so i need to fix this issue.

A:

On Create Grade button, use this:
<button type="button" class="btn btn-primary"
        (click)="createGrade(create, division.id)">Create grade
</button>

i.e. pass division.id from template local variable, as you are doing it here:
<button ... [(ngModel)]="division.id" value="{{division.id}}">

Then in createGrade handler, receive it as second argument and use:
createGrade(form: NgForm, divisionId: number){
    let data = form.value;
    let formData: FormData = new FormData();
    formData.append('grades[0][name]', data.name);
    formData.append('grades[0][division_id]', divisionId);

    ...
}

