Adding a new row with autoform and a html table

help
1

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">
        <thead>
          <tr>
            <th>Slice Start</th>
            <th>Slice End</th>
            <th><button type="button" class="btn btn-primary autoform-add-item" data-autoform-field="{{this.atts.name}}" data-autoform-minCount="{{this.atts.minCount}}" data-autoform-maxCount="{{this.atts.maxCount}}"><span class="glyphicon glyphicon-plus"></span></button></th>
          </tr>
        </thead>
      {{#afEachArrayItem name="WiFiOffloadSettings"}}
      <tbody>
        <tr>
          <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>
        </tr>
      </tbody>
     {{/afEachArrayItem}}
   </table>
  <button type="submit" class="btn btn-primary">Save</button>
  {{/autoForm}}