Как динамически заполнить значение последующего ввода на 1 в динамическом текстовом поле?

#javascript

Вопрос:

У меня есть поле ввода, которое генерируется динамически, как мне установить значение текстового поля по предыдущему значению плюс 1. Как и на изображении, когда мы вводим 10, 11 должно быть автоматически установлено в поле ниже, аналогично при вводе 20, 21 должно быть автоматически установлено в поле ниже. введите описание изображения здесь

 slabDetailsHeader: [
        { key: 'from', value: 'From',placeholder: 'Eg: 0' },
        { key: 'to', value: 'To'placeholder: 'Eg: 10' },
    ],

  <div *ngFor="let list of tableData; let i = index" >
         <div *ngFor="let heading of header" [ngStyle]="{'width': (98/slabHeader.length)  '%'}">
                    <input type ="text" [value]="list[heading.key]"
                        [placeholder]="heading.placeholder" (onChange)="handleChange($event, heading.key, i)"/>
           </div>
        <div>
<button (click)="handleAddRow(event, tableData.length)">Add Row</button>

// add row click
  public handleAddSlabRow = (e, length) => {
    const slab = { id: 0, from: '', to: ''};
    slab.id = length;
    this.tableData.push(slab);
  }

  public handleChange = (e, value, i) => {
    this.tableData.filter(el => {
      if (i === el.id) {
        this.tableData[i][value] = e;
      }
    });
  }