Spinner Working on only One button in a page when the button is clicked. Others dont show spinner-CodePudding

I am having a carousel with products and I want to show a loading Spinner when each and every Add to Cart button is clicked. But the code I have only shows a spinner on the first button clicked. Others wont show afterwards. Please Help

The Carousel

<div >
            <div class='item'>
                <div >
                    <div >
                        <img src="assets/img/sample/photo/product1.jpg"  alt="product image">
                        <h2 >Apple</h2>
                        <p >1 kg</p>
                        <div >$ 1.50</div>
                        <a href="#"  id='spinner-btn'>ADD TO CART</a>
                    </div>
                </div>

            </div>
            <div class='item'>
                <div >
                    <div >
                        <img src="assets/img/sample/photo/product1.jpg"  alt="product image">
                        <h2 >Apple</h2>
                        <p >1 kg</p>
                        <div >$ 1.50</div>
                        <a href="#"  id='spinner-btn'>ADD TO CART</a>
                    </div>
                </div>

            </div>
            <div class='item'>
                <div >
                    <div >
                        <img src="assets/img/sample/photo/product1.jpg"  alt="product image">
                        <h2 >Apple</h2>
                        <p >1 kg</p>
                        <div >$ 1.50</div>
                        <a href="#"  id='spinner-btn'>ADD TO CART</a>
                    </div>
                </div>

            </div>
        </div>

The Javascript Code for showing spinner on button click

$(document).ready(function () {
    $("#spinner-btn").click(function () {
        // disable button
        $(this).prop("disabled", false);
        // add spinner to button
        $(this).html(
            '<span  role="status" aria-hidden="true"></span> Loading'
        );
    });
});

CodePudding user response：

ID attribut must be unique !

If you want to target more than one element, you need to use a class.

https://careerkarma.com/blog/css-class-vs-id-2/

$(document).ready(function () {
    $(".spinner-btn").click(function () {
        // disable button
        $(this).prop("disabled", false);
        // add spinner to button
        $(this).html('<span  role="status" aria-hidden="true"></span> Loading');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
            <div class='item'>
                <div >
                    <div >
                        <img src="assets/img/sample/photo/product1.jpg"  alt="product image">
                        <h2 >Apple</h2>
                        <p >1 kg</p>
                        <div >$ 1.50</div>
                        <a href="#" >ADD TO CART</a>
                    </div>
                </div>

            </div>
            <div class='item'>
                <div >
                    <div >
                        <img src="assets/img/sample/photo/product1.jpg"  alt="product image">
                        <h2 >Apple</h2>
                        <p >1 kg</p>
                        <div >$ 1.50</div>
                        <a href="#" >ADD TO CART</a>
                    </div>
                </div>

            </div>
            <div class='item'>
                <div >
                    <div >
                        <img src="assets/img/sample/photo/product1.jpg"  alt="product image">
                        <h2 >Apple</h2>
                        <p >1 kg</p>
                        <div >$ 1.50</div>
                        <a href="#" >ADD TO CART</a>
                    </div>
                </div>

            </div>
        </div>

CodePudding user response：

You are using the same ID on all of them, this will cause you problems because an ID element must be unique and used in 1 place only.

Try giving them all a shared class, or change the a elements to a button element, and give it a certain type for example:

<button type="add-to-cart">Add To Cart</button>

$(document).ready(function () {
    $("button[type='add-to-cart']").click(function () {
        // disable button
        $(this).prop("disabled", false);
        // add spinner to button
        $(this).html('<span  role="status" aria-hidden="true"></span> Loading');
    });
});