jQuery not appending code after removal

Question

I'm looking for help because I've encountered a problem when using jQuery's .remove().

I have a piece of code that looks like this:

$( '.video-button span.glyphicon-play' ).click(function() {
    $( '#video-player' ).append( '<iframe id="youtube-video-iframe-index" width="560" height="315" src="//www.youtube.com/v/YE7VzlLtp-4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>' );

    $( '.video-button span.stop-video' ).click(function() {
        $('iframe#youtube-video-iframe-index').attr('src', '');
        $( 'iframe#youtube-video-iframe-index' ).remove();
    });
});

The main idea is to append the iframe snippet once "span.glyphicon-play" is clicked, and later to remove it by clicking "span.stop-video". The code works the first time, it appends and removes the piece of code indicated, but after that it simply won't append the iframe element anymore. "span.glyphicon-play" and "span.stop-video" are the same element with different classes.

Do you guys have an idea on why is this happening? Any hint provided will be very much appreciated!

Answer 1

As @sideroxylon suggested, removing the "stop-video" class from the element after it's been clicked may work (really, I don't know because I didn't try it).

My solution, since I'm in a rush, is to create a different element with the class "stop-video" to trigger the .remove() event, this along some other workarounds.

Thanks for all the help provided everybody.