I want to remove and add a overlay as often as I want but I cant seem to get js to remove a by js created element, any ideas?

[JS Fiddle Example](http://jsfiddle.net/msro2hoq/ "JS Fiddle Example")

html

```
<div id="background"></div>
<button id="open">Open</button>
<div id="overlay">
    <button id="close">Close</button>
</div>

```

js/jQuery

```
$(function() {

    $('#open').click(function() {

        $('body').append('<div id="overlay"><button id="Close">Close</button></div>');

    });

    $('#close').click(function(){
        $('#overlay').remove();
    });
});

```

css:

```
#overlay{
    padding: 8px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.1);
}

```