[Nexus]

<style>
img {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: gray;
    border-radius: 50%;
}

.play-button--playing img {
    animation: spin 4s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const buttons = document.querySelectorAll(".play-button");
    const NOW_PLAYING_CLASS_NAME = "play-button--playing";

    buttons.forEach(node => {
        node.addEventListener("click", e => {
            e.preventDefault();

            const isNowPlaying = node.classList.contains(NOW_PLAYING_CLASS_NAME);

            buttons.forEach(button => {
                button.classList.toggle(NOW_PLAYING_CLASS_NAME, !isNowPlaying && node === button);
            });
        });
    });
});
</script>

<a href="#" class="play-button"><img src="" alt="img-1"></a>
<a href="#" class="play-button"><img src="" alt="img-2"></a>
<a href="#" class="play-button"><img src="" alt="img-3"></a>