Как получить текстовое поле динамически при нажатии кнопки, тогда новое текстовое поле попадает под эту конкретную область, используя угловой 6?

Question

.component.html

 <div class="row">
        <article class="col-xs-6 col-sm-6 col-md-6 col-lg-12">
            <header>
              <h2>Person Details</h2>
            </header>
            <form #formRef="ngForm">
                  <div *ngFor="let detail of details; let in=index" class="col-sm-4">
                      <div class="form-group">
                        <input type="text" [(ngModel)]="details[in].value" name="name{{in}}" class="form-control" #name="ngModel" />
                        <button (click)="add()">+</button>
                      </div>
                      <br />
                  </div>
                  <button class="primary" type="submit">Save</button>
                </form>
        </article>
    </div>

.component.ts:

 details = [{value: 'Name'}, {value: 'Address'}, {value: 'Phone'}];

 add() {
    this.details.push({value: ''});
  }}

Я получил вывод, как показано ниже в текстовом поле:

Name +
Address +
Phone +

Когда я нажимаю символ «плюс», новое текстовое поле будет создано под последним. Но я хочу, чтобы соответствующее текстовое поле под ним должно было создать.

Как реализовать новое текстовое поле, появится подсоответствующие текстовые поля. Он не будет генерироваться в последнюю очередь.

Я не могу найти решения для этого. Пожалуйста, помогите мне кто-нибудь