Javascript - Function works once, but never again
<p>I'm building a very simple lightbox script; when you click a button, the lightbox is created. When you click on the lightbox background, it is removed.</p>

<p>The first time you call the function it works just fine. Click button, lightbox shows, click lightbox, it disappears. However, if you try to click the button AGAIN, nothing happens - the div isn't called. No console errors or anything, don't know what the problem is.</p>

<p><strong>JSFIDDLE</strong> <a href="http://jsfiddle.net/3fgTC/" rel="nofollow">http://jsfiddle.net/3fgTC/</a></p>

<p><strong>CODE</strong></p>

<pre><code>function closeLightBox(){
        document.body.removeChild(lightBox);
}

function createElem(){
    var elem = "&lt;div id='lightBox'&gt;&lt;/div&gt;";
    var bodyElem = document.body;
        bodyElem.innerHTML = elem + bodyElem.innerHTML;
    var lightBox = document.getElementById("lightBox");
        lightBox.style.width = "100%";
        lightBox.style.height = "800px";
        lightBox.style.backgroundColor = "rgba(0,0,0,.5)";
        lightBox.onclick = function(){
            closeLightBox();
        }
}
var button = document.getElementsByClassName("btn");
    for (var i = 0; i&lt;button.length; i++){
        button[i].onclick = function(){
            createElem();
        }
    }
</code></pre>

<p>Any ideas?</p>
