This form consists of 1 textfield, and 1 ajax button.

I'm trying to make it add another text field with each click.

It works for the first one, to get a total of 2 text fields. I cannot get more than 2 to appear though.

I suspect the callback is just adding a field to the original $form, without taking account any updates since the form originally loaded.

I'm not sure how to approach this in Drupal 8. Any insight would be appreciated.

Here is my form control

<?php
...
class MyModuleForm extends FormBase {
  ...
  public function buildForm(array $form, array &$form_state) {
    $form['foo'] = array(
      '#type' => 'tree',
      '#prefix' => '<div id="foo-replace">',
      '#suffix' => '</div>'
    );
    $form['foo'][0] = array(
      '#type' => 'textfield'
    );
    $form['add'] = array(
      '#type' => 'submit',
      '#name' => 'add',
      '#value' => t('Add'),
      '#ajax' => array(
        'callback' => array($this, 'addMore'),
        'wrapper' => 'foo-replace',
        'effect' => 'fade',
      ),
    );
    return $form;
  }

  public function addMore(array $form, array &$form_state) {
    $form['foo'][] = array(
      '#type' => 'textfield'
    );
    return $form['foo'];
  }
}