AMP amp-mustache display success message before submit

Question

I am developing a form in AMP, within this form, there is a register of students for enrollment. Users (parents) will be able to add two more students to the same registration. However, when I click to add another student, with all required forms filled out, amp-moustache displays the success message before clicking the submit button. When the new student is added by the user, the form is also required.
Sorry for my bad english.

<script src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

<!-- required fields -->

<div class="form-group">
<label for="" class="label-forms">Name 1: *</label>
<input name="" type="text" class="" required>
</div>

<br/>

<button id="add-2" class="button" hidden on="tap:e2.hide,add-2.hide,remove-2.show, AMP.setState({customvalue: ''})">Remove Name 2...</button>
<button id="remove-2" class="button" on="tap:e2.show,remove-2.hide,add-2.show, AMP.setState({customvalue: 'true'})">Add Name 2...</button>

<div id="e2" hidden>                                            
<input name="" type="text" class="" [required]="customvalue">                       
<div id="div-edu2" class="form-group">
<select name="" class="input-default" [required]="customvalue">
    <option value="1" selected>A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
</select>
</div>


<button id="add-3" class="button" hidden on="tap:e3.hide,add-3.hide,remove-3.show, AMP.setState({customvalue2: ''})">Remove Name 3...</button> 
<button id="remove-3" class="button" on="tap:e3.show,remove-3.hide,add-3.show, AMP.setState({customvalue2: 'true'})">Add Name 3...</button>

<div id="e3" hidden>

<input name="" type="text" class="" [required]="customvalue2">

<div id="div-edu3" class="form-group">
    <label class="label-forms" for="">Select 3: *</label>
    <select name="" class="input-default" [required]="customvalue2">
        <option value="1" selected>Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
   </select>
</div>

</div>

</div>
</div>

<!-- ... -->


<div class="col-10 mx-auto">
<input type="submit" value="Send">
</div>


<div submit-success>
<template type="amp-mustache">
    <p class="text-center">Success!</p>
</template>
</div>

<div submit-error>
<template type="amp-mustache">
    <p class="text-center">Fail.</p>
</template>
</div>

IMG 1 - FORM

IMG 2 - ON CLICK ADD BUTTON

IMG 3 - AMP MESSAGE

Answer 1

I simply solved this problem by changing the html tag from <button> to <a></a>. Solved it, but I still haven't figured out the reason for the problem with the button.