AMP How to use amp-bind setState on item of amp-list

Question

I want to update the quantity of a product in my cart. I do not want to use the default input type number because of the styling, thus have 2 buttons around my text input to update the quantity.

Here's my state:

  <amp-state id="checkout" src="/api/shopify/checkout" [src]="/api/shopify/checkout"></amp-state>

Here's my form and list:

<form method="POST"
      id="form"
      action-xhr="/api/shopify/checkout"
      encType="application/x-www-form-urlencoded"
      target="_top"
      on="submit-success: AMP.setState({checkout: event.response})">
    <amp-list src="/api/shopify/checkout"
              [src]="checkout.items"
              width="300"
              height="600"
              layout="fill"
              binding="refresh">
        <template type="amp-mustache">
            <button on="tap:AMP.setState({ quantity: quantity - 1 })">-</button>
                <input type="text"
                       name="{{ variantId }}"
                       value="{{ quantity }}"
                       pattern="[0-999]"
                       on="change:form.submit" />
            <button on="tap:AMP.setState({ quantity: quantity + 1 })">+</button>
        </template>
    </amp-list>
</form>

I want to update the quantity of my item, then I assume the on="change:form.submit" of my text input will call a refresh to my server and update the data. If I update the input, it already work, just not the button state.