Adding a new row with autoform and a html table


I’m experimenting with Autoforms and an array field in a html table. So far I can modify rows and delete them, but am having trouble working out how to add a new row. The add button doesn’t seem to do anything.

My code so far:

  {{#autoForm id="eventDatesForm" type="update" collection="Events" doc=this buttonContent="Save"}}

      <h2>Event Dates</h2>
      {{> afQuickField name="timezone"}}
      <table class="table table-bordered table-hover table-condensed">
            <th>Slice Start</th>
            <th>Slice End</th>
            <th><button type="button" class="btn btn-primary autoform-add-item" data-autoform-field="{{}}" data-autoform-minCount="{{this.atts.minCount}}" data-autoform-maxCount="{{this.atts.maxCount}}"><span class="glyphicon glyphicon-plus"></span></button></th>
      {{#afEachArrayItem name="WiFiOffloadSettings"}}
          <td>{{> afFieldInput name=this.current.offloadSliceStart type=datetime}}</td>
          <td>{{> afFieldInput name=this.current.offloadSliceEnd type=datetime}}</td>
          <td><button type="button" class="btn btn-danger btn-sm autoform-remove-item"><span class="glyphicon glyphicon-minus"></span></button></td>
  <button type="submit" class="btn btn-primary">Save</button>