Fade in/out doesn't work with an append div
<p>Tried the best I could and did some research, I still couldn't figure it out.
My goal is to create an easy coded lightbox for a part of my final examination website that im working on.</p>

<p>Please need help with this annoying problem of mine, would be very appreciated! </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
 
 $('button').click(function() {
  
  $('body').append(' &lt;div id="lb-shadow"&gt;&lt;p id="lb-x"&gt;[ x ]&lt;/p&gt;&lt;/div&gt; ');
  $('body').append(' &lt;div id="lb-container"&gt;&lt;/div&gt; ');
  $('#lb-shadow').fadeIn(6000 );
  $('#lb-container').fadeIn(6000);
  
  $('#lb-shadow').click(function(){
   $('#lb-container').fadeOut(6000);
   $('#lb-shadow').fadeOut(6000);
   
   $('#lb-container').detach();
   $('#lb-shadow').detach();
  });
 });
 
 
 
 
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#lb-btn{
 position:absolute;
 outline:0;
 border:0;
 padding:5px 10px;
 cursor:pointer;
 background-color:black;
}
#lb-btn p{
    padding:5px;
 color:#ccc;
 border:1px solid white;
}


#lb-shadow{
 position:absolute;
 left:0;
 right:0;
 height:100%;
 width:100%;
 background-color:rgba(0, 0, 0, 0.7);
}
#lb-x{
 color:#ccc;
 text-transform:uppercase;
 float:right;
 margin:15px;
 cursor:pointer;
 transition: ease .3s;
}
#lb-x:hover{
 color:white;
}
#lb-container{
 position:absolute;
 height:400px;
 width:600px;
 left:calc(50% - 300px);
 top:calc(50% - 200px);
 background-color:white;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 
    &lt;title&gt;Min hemsida&lt;/title&gt;
 
    &lt;link rel="stylesheet" type="text/css" href="css/cindex.css"&gt;
    
 &lt;link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css"&gt;
 &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;
 
 &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
 &lt;script src="js/cindex.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;


&lt;button id="lb-btn"&gt;&lt;p&gt; Login / Register &lt;/p&gt;&lt;/button&gt;







&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>