jquery onclick function braking after addClass next click

jquery onclick function braking after addClass next click

Click on the element adds the class play the css can handle it well. With
the next click I would like to remove the class play and that just doesn't
wants to happen.
What am I doing wrong? Also how could I do better ?
Thank YOU
<span class="icon small-player-icons pause" style="display: inline;">click
here</span>
$('.small-player-icons.pause').on('click',function(){
$(this).addClass('play');
});
$('.small-player-icons.pause.play').on('click', function(){
alert("clicked");
$(this).removeClass('play');
});
span.small-player-icons.pause {
background-color:green;
padding:10px;
}
span.small-player-icons.play {
background-color:orange;
}
Here is the fiddle