I am creating an AMP form, where I want the users to add a list of elements, say advantage. I want the user to add each advantage in a separate input field so I can save it to the database. I think a repeatable field is the most appropriate input field for the user to add these details. However, I couldn't figure out how to create a working form field in AMP.
Here is the code I have attempted
<amp-form method="post" action-xhr="/submit-form" target="_top">
<div id="input-container">
<input type="text" name="input[]" required>
</div>
<button type="button" on="tap:AMP.setState({count: count + 1})">Add field</button>
<input type="submit" value="Submit">
<amp-state id="state">
<script type="application/json">
{ "count": 1 }
</script>
</amp-state>
<amp-list id="list" items="." single-item>
<template type="amp-mustache">
<div>
<input type="text" name="input[]" required>
</div>
</template>
</amp-list>
</amp-form>
The above code could only increase the count when the button is clicked. Need help with appending the input field based on the count.