使用javascript [duplicate]点击后更改按钮的文本

Question

This question already has an answer here:

• Why does Jquery only affect the first div element? [duplicate] 4 answers

I am new to javascript and I am facing a problem with code:

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form id="add-to-cart-form">
    <div class="cart">
        <input type="hidden" name="product_code" value="prince"/>
        <input type="text" name="name" value="First Form"/>
        <button id="btn_add" type="submit">Add to Cart</button>
    </div>
</form>

<form id="add-to-cart-form">
    <div class="cart">
        <input type="hidden" name="product_code" value="lionel"/>
        <input type="text" name="name" value="Second Form"/>
        <button id="btn_add" type="submit">Add to Cart</button>
    </div>
</form>

   
<script>
    $(document).ready(function(){
        $("#add-to-cart-form").submit(function(e) {

            $("#btn_add").html('Good');
            $("input[name='name']").val('Input change');

            e.preventDefault(); // avoid to execute the actual submit of the form.
        });
    });
</script>

The purpose of my code is to change the submit button when the form is submitted and change of value of the input of the submitted form. But with my code, after submitting the first form, the submit button changes (this is normal) and the value of the input field of the second form changes (not normal). Also after submitting the second form, it does not work at all.

Sorry I tried my best to make the post clear. I am not a native english speaker.

</div>

Answer 1

The id should be unique per page
Try it:

<form id="add-to-cart-form-first">
    <div class="cart">
        <input type="hidden" name="product_code" value="prince"/>
        <input type="text" name="name" value="First Form"/>
        <button id="btn_add_first" type="submit">Add to Cart</button>
    </div>
</form>

<form id="add-to-cart-form-second">
    <div class="cart">
        <input type="hidden" name="product_code" value="lionel"/>
        <input type="text" name="name" value="Second Form"/>
        <button id="btn_add_second" type="submit">Add to Cart</button>
    </div>
</form>


<script>
    $(document).ready(function(){
        $("form").submit(function(e) {

            $(this).find("[type=submit]").html('Good');
            $(this).find("input[name='name']").val('Input change');

            e.preventDefault(); // avoid to execute the actual submit of the form.
        });
    });
</script>