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>

Leave a Comment