[Solved] Codeigniter JQUERY

On my codeigniter project, the user can insert a image by url or upload it per normal.

I generate some text using jquery html()

Code:

<script type="text/javascript">
standardhtml = '';
standardhtml += '<div class="" style="display: block;">';
standardhtml += 'You can also provide a ';
standardhtml += '<a class="url_input">link from the web</a>';
standardhtml += '</div>';

$('.hyperlink_text').html(standardhtml);

$(".hyperlink_text a.url_input").click(function(){
    newhtml = '';
    newhtml += 'Link from the web ';
    newhtml += '<input class="form-control input-sm" placeholder="http://example.com/image.png" type="text">';
    newhtml += '<span class="separator"> | </span>';
    newhtml += '<a class="cancel" id="cancel">Cancel</a>';
    $('.hyperlink_text').html(newhtml);
});

// Should be able to detect cancel button above does not?

$("a.cancel").click(function(){
    $('.hyperlink_text').html(standardhtml);
    alert('Yes Works'); // Does not work
});
</script>

When I click on a.url_input link it generates new html in that html it has a cancel a tag in it

When I click on the cancel tag it should re generate the (standardhtml) but does not it is not detecting the a.cancel link

Code:

$('.hyperlink_text').html(standardhtml);

Example Codepen  Demo

Question How can I make sure when I click on cancel button on the newhtml it will regenerate the standardhtml

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!