[Puzzle]

<style>
02
img {
03
    display: inline-block;
04
    width: 60px;
05
    height: 60px;
06
    background: gray;
07
    border-radius: 50%;
08
}
09
 
10
.play-button--playing img {
11
    animation: spin 4s linear infinite;
12
}
13
 
14
@keyframes spin {
15
    100% {
16
        transform: rotate(360deg);
17
    }
18
}
19
</style>
20
 
21
<script>
22
document.addEventListener("DOMContentLoaded", () => {
23
    const buttons = document.querySelectorAll(".play-button");
24
    const NOW_PLAYING_CLASS_NAME = "play-button--playing";
25
 
26
    buttons.forEach(node => {
27
        node.addEventListener("click", e => {
28
            e.preventDefault();
29
 
30
            const isNowPlaying = node.classList.contains(NOW_PLAYING_CLASS_NAME);
31
 
32
            buttons.forEach(button => {
33
                button.classList.t oggle(NOW_PLAYING_CLASS_NAME, !isNowPlaying && node === button);
34
            });
35
        });
36
    });
37
});
38
</script>
39
 
40
<a href="#" class="play-button"><img src="" alt="img-1"></a>
41
<a href="#" class="play-button"><img src="" alt="img-2"></a>
42
<a href="#" class="play-button"><img src="" alt="img-3"></a>

Не могли бы вы посмотреть что я не так сделал? Вроде как всё так..но не работает в моём случае((