How do I toggle the same fa fa icons on multiple buttons?

I want to make 4 buttons that do the same thing. When you click on the button the heart is filled and when you click again the heart is empty. But only the first button works. When I click on the other three button the first button goes off. I don’t really understand what I need to do. How can I make all 4 buttons to work?

var btn = document.getElementById('btn');


function Toggle() {
    if (btn.classList.contains("far")) {
        btn.classList.remove("far");
        btn.classList.add("fas");
    }else{
        btn.classList.remove("fas");
        btn.classList.add("far");
    }
}

document.querySelectorAll('button').forEach((btn) => btn.addEventListener('click', Toggle, (e) => { console.log('hello'); }))
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&family=Open+Sans:wght@300;400;600;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.title {
    text-align: center;
    padding: 1.8rem;
    font-size: 2rem;
    color: black;
    font-family: 'Lexend Mega', sans-serif;
}

.populair-movies {
    justify-content: center;
    display: flex;
}

.populair-movies h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    padding-top: 0.2rem;
    padding-bottom: 0.7rem;
}

.populair-movies p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
}

.stars {
    padding-bottom: 0.3rem;
}

.populair-movies .card-container .card {
    height: 300px;
    width: 200px;
    margin: 0.5rem;
}

.populair-movies .card-container .card img {
    height: 100%;
    width: 100%;
}

.styling-btn {
    margin-top: 1rem;
    padding: 0.5rem 1.1rem 0.5rem 0.5rem;
    background: blue;
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    border: none;
    color: #e8efff;
    outline: none;
    border-radius: 5px;
    cursor: pointer;
}

.styling-btn i {
    margin-right: 0.7rem;
    margin-left: 0.3rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Populair Movies</title>

    <!-- font awesome cdn link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

    <!-- css file -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

    <h2 class="title">POPULAIR MOVIES</h2>

    <section class="populair-movies">
        <div class="card-container">
            <div class="card">
                <img src="https://www.moviemeter.nl/images/cover/1133000/1133282.jpg" alt="The Midnight Sky">
                <div class="info">
                    <h3>The Midnight Sky</h3>
                    <div class="stars">
                        <p>
                            <i class="fas fa-star"></i>
                            5,6
                        </p>
                    </div>
                    <p>2020 ‧ Sci-fi/Drama ‧ 2 u 2 m</p>
                    <button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
                </div>
            </div>
        </div>

        <div class="card-container">
            <div class="card">
                <img src="https://m.media-amazon.com/images/M/MV5BOWRhYWFkMDEtNTFjZC00OWJkLWJmMWQtNzI2OWRjZjVjOGYyXkEyXkFqcGdeQXVyMzQwMTY2Nzk@._V1_.jpg" alt="Escape from Pretoria">
                <div class="info">
                    <h3>Escape from Pretoria</h3>
                    <div class="stars">
                        <p>
                            <i class="fas fa-star"></i>
                            6,8
                        </p>
                    </div>
                    <p>2020 ‧ Drama/Thriller ‧ 1 u 46 m
                    </p>
                    <button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
                </div>
            </div>
        </div>

        <div class="card-container">
            <div class="card">
                <img src="https://m.media-amazon.com/images/M/MV5BMWU0MzQwNjMtZGRiMC00M2UzLWE1YmItMWU3M2E0NmNkMDQ2XkEyXkFqcGdeQXVyNjEwNTM2Mzc@._V1_.jpg" alt="Kadaver">
                <div class="info">
                    <h3>Kadaver</h3>
                    <div class="stars">
                        <p>
                            <i class="fas fa-star"></i>
                            5,1
                        </p>
                    </div>
                    <p>2020 ‧ Drama/Horror ‧ 1 u 26 m
                    </p>
                    <button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
                </div>
            </div>
        </div>

        <div class="card-container">
            <div class="card">
                <img src="https://m.media-amazon.com/images/M/MV5BY2RmZmI0NDMtMGQzOC00YWU3LTkwYWUtMDRkNDBjZDg3YTkyXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg" alt="The Dig">
                <div class="info">
                    <h3>The Dig</h3>
                    <div class="stars">
                        <p>
                            <i class="fas fa-star"></i>
                            7,2
                        </p>
                    </div>
                    <p>2021 ‧ Drama/Geschiedenis ‧ 1 u 52 m
                    </p>
                    <button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
                </div>
            </div>
        </div>

    </section>

    <script src="js/script.js"></script>

</body></html>

11 thoughts on “How do I toggle the same fa fa icons on multiple buttons?”

  1. You’re using the same id in all the icons. JavaScript is only getting the element with the first id.

    Another way to do it in JavaScript would be:

    function toggle(index) {
        const icon = document.querySelectorAll("button i")[index];
        icon.classList.toggle("far");
        icon.classList.toggle("fas");
    }
    
    document.querySelectorAll('button').forEach((btn, index) => btn.addEventListener('click', function() { 
        toggle(index); 
    }));
    
    function toggle(index) {
        const icon = document.querySelectorAll("button i")[index];
        icon.classList.toggle("far");
        icon.classList.toggle("fas");
    }
    
    document.querySelectorAll('button').forEach((btn, index) => btn.addEventListener('click', function() { 
        toggle(index); 
    }));
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;700;900&display=swap');
    
    @import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');
    
    @import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&family=Open+Sans:wght@300;400;600;800&display=swap');
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .title {
        text-align: center;
        padding: 1.8rem;
        font-size: 2rem;
        color: black;
        font-family: 'Lexend Mega', sans-serif;
    }
    
    .populair-movies {
        justify-content: center;
        display: flex;
    }
    
    .populair-movies h3 {
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        font-size: 1.2rem;
        padding-top: 0.2rem;
        padding-bottom: 0.7rem;
    }
    
    .populair-movies p {
        font-family: 'Open Sans', sans-serif;
        font-weight: 100;
    }
    
    .stars {
        padding-bottom: 0.3rem;
    }
    
    .populair-movies .card-container .card {
        height: 300px;
        width: 200px;
        margin: 0.5rem;
    }
    
    .populair-movies .card-container .card img {
        height: 100%;
        width: 100%;
    }
    
    .styling-btn {
        margin-top: 1rem;
        padding: 0.5rem 1.1rem 0.5rem 0.5rem;
        background: blue;
        font-size: 1rem;
        font-family: 'Open Sans', sans-serif;
        border: none;
        color: #e8efff;
        outline: none;
        border-radius: 5px;
        cursor: pointer;
    }
    
    .styling-btn i {
        margin-right: 0.7rem;
        margin-left: 0.3rem;
    }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Populair Movies</title>
    
        <!-- font awesome cdn link -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
    
        <!-- css file -->
        <link href="css/style.css" rel="stylesheet">
    </head>
    
    <body>
    
        <h2 class="title">POPULAIR MOVIES</h2>
    
        <section class="populair-movies">
            <div class="card-container">
                <div class="card">
                    <img src="https://www.moviemeter.nl/images/cover/1133000/1133282.jpg" alt="The Midnight Sky">
                    <div class="info">
                        <h3>The Midnight Sky</h3>
                        <div class="stars">
                            <p>
                                <i class="fas fa-star"></i>
                                5,6
                            </p>
                        </div>
                        <p>2020 ‧ Sci-fi/Drama ‧ 2 u 2 m</p>
                        <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
                    </div>
                </div>
            </div>
    
            <div class="card-container">
                <div class="card">
                    <img src="https://m.media-amazon.com/images/M/MV5BOWRhYWFkMDEtNTFjZC00OWJkLWJmMWQtNzI2OWRjZjVjOGYyXkEyXkFqcGdeQXVyMzQwMTY2Nzk@._V1_.jpg" alt="Escape from Pretoria">
                    <div class="info">
                        <h3>Escape from Pretoria</h3>
                        <div class="stars">
                            <p>
                                <i class="fas fa-star"></i>
                                6,8
                            </p>
                        </div>
                        <p>2020 ‧ Drama/Thriller ‧ 1 u 46 m
                        </p>
                        <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
                    </div>
                </div>
            </div>
    
            <div class="card-container">
                <div class="card">
                    <img src="https://m.media-amazon.com/images/M/MV5BMWU0MzQwNjMtZGRiMC00M2UzLWE1YmItMWU3M2E0NmNkMDQ2XkEyXkFqcGdeQXVyNjEwNTM2Mzc@._V1_.jpg" alt="Kadaver">
                    <div class="info">
                        <h3>Kadaver</h3>
                        <div class="stars">
                            <p>
                                <i class="fas fa-star"></i>
                                5,1
                            </p>
                        </div>
                        <p>2020 ‧ Drama/Horror ‧ 1 u 26 m
                        </p>
                        <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
                    </div>
                </div>
            </div>
    
            <div class="card-container">
                <div class="card">
                    <img src="https://m.media-amazon.com/images/M/MV5BY2RmZmI0NDMtMGQzOC00YWU3LTkwYWUtMDRkNDBjZDg3YTkyXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg" alt="The Dig">
                    <div class="info">
                        <h3>The Dig</h3>
                        <div class="stars">
                            <p>
                                <i class="fas fa-star"></i>
                                7,2
                            </p>
                        </div>
                        <p>2021 ‧ Drama/Geschiedenis ‧ 1 u 52 m
                        </p>
                        <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
                    </div>
                </div>
            </div>
    
        </section>
    
        <script src="js/script.js"></script>
    
    </body></html>
    Reply

Leave a Comment