When clicking on the second button to play it, then clicking on the first button to play it, I agree that the second button shouldn't return back to the initial state, but should be at the play state instead.
Chrome lets me break execution of the code on attribute modification, which I'll do to easily figure out why that's happening.
The first button uses a class of "active" to show the background image when it's playing. When it's not playing that "active" class is removed from the first button.
The second button uses the same class of "active" for a different purpose. The second button needs "active" to always remain on the button to indicate that it's been activated.
That second button needs to change "active" to "triggered". The "triggered" class gets added to a button when you start interacting with it, and doesn't ever get removed.
How do we do that? Wherever the script adds "active" to an element, duplicate that line and call the first one "triggered". Don't do anything when the script removes "active", for that's already working properly.
Then you can rename the CSS style from
.playButtonb.triggered and that should then work well.