How do I make my textarea has different values?

See more:

HTML5

Typescript

AngularJs

, +

I have 3 quill editors, that I loop and whenever I type in one of those 3, the other 2 will automatically follow. How do I make each editor has its own values? I'm putting it in finalAnswer.

This is my subjective.component.ts

public AnswerSeason: any[] = [];

exampage(event, n: number) {
    localStorage.setItem('examnumber', JSON.stringify(n));
    this.status = true;
    this.examlisting = JSON.parse(localStorage.getItem('ExamList'));
    let x = this.examlisting;
    // Convert the string back to an object
    let url = x[n - 1];
    if (url['flag'] != 2) {
        url['flag'] = 1; // no answer;
        this.AnswerSeason = null; // or false or ''
        localStorage.setItem('ExamList', JSON.stringify(x));
        this.service.updateAnswer(url).subscribe(data => {
            if (data['status']) {

            }
        })
    }
    this.AnswerSeason = url['Finalanswer'];
    this.number = n;
    this.q = x[n - 1];
    return true;
    // this.ngOnInit();
}

answers(ans, id, num) {
    // alert(num);
    this.examlisting = JSON.parse(localStorage.getItem('ExamList'));
    let x = this.examlisting;
    let url = x[num - 1];
    if (ans == null) {
        let lang = JSON.parse(localStorage.getItem('lang'));
        let alertFail = '';
        if (lang == 'bm') {
            alertFail = "Sila pilih jawapan anda";
        } else {
            alertFail = "Please select your answer";
        }
        this.alert.confirm({ message: alertFail, alert: 'fail' })
    } else {
        url['flag'] = 2; // no answer
        url['Finalanswer'] = this.AnswerSeason;
        localStorage.setItem('ExamList', JSON.stringify(x));
        this.exampage('', num + 1);
        // if (num == 100) {
        //     this.exampage('', 100);
        // } else {
        //     this.exampage('', num + 1);
        // }
        this.service.updateAnswer(url).subscribe(data => {
            if (data['status']) {

            }
        })
    }
}

This is my subjective.component.html

<div *ngIf="q.type === 'multiple'" class="pt-3">
    <img *ngIf="q.image" [src]="q?.image" style="display:block; margin-right:auto; margin-left:auto; margin-bottom:10px;">
    <p class="text-dark-75 font-size-lg font-weight-normal mb-4" [innerHtml]="q?.question | newline"></p>

    <div *ngFor="let sq of q?.subquestion">
        <p [innerHtml]="sq | newline"></p>

        <quill-editor [(ngModel)]="AnswerSeason" theme="snow" [style]="{'margin-bottom': '15px', 'max-height': '150px', 'overflow': 'scroll'}">
            <div quill-editor-toolbar>
                <span class="ql-formats">
                    <button type="button" class="ql-bold">
                        <svg viewBox="0 0 18 18">
                            <path class="ql-stroke" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path>
                            <path class="ql-stroke" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path>
                        </svg>
                    </button>

                    <button type="button" class="ql-italic">
                        <svg viewBox="0 0 18 18">
                            <path class="ql-stroke" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path>
                            <path class="ql-stroke" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path>
                        </svg>
                    </button>

                    <button type="button" class="ql-underline">
                        <svg viewBox="0 0 18 18">
                            <path class="ql-stroke" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path>
                            <path class="ql-stroke" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path>
                        </svg>
                    </button>
                </span>
            </div>
        </quill-editor>
    </div>
</div>

the preview is like this:

1. who am I?
[..........]

2. who are you?
[..........]

3. who are we?
[..........]

and when I type in one of the editors, the other follow too.

1. who am I?
[ABC.......]

2. who are you?
[ABC.......]

3. who are we?
[ABC.......]

What I have tried:

I've tried these

1. public AnswerSeason: any;
2. let i = index
3. [(ngModel)]="AnswerSeason[i]"

but not working, maybe I miss something?