jquery append function isnt working
<p>I am trying to add a div and a span to an image on click and then remove it on the span click.</p>

<pre><code>   &lt;div id="gallery" align="center"&gt;    

        &lt;img  src="http://www.frontpagejunky.com/wp-content/uploads/2011/05.jpg" class="img-view" width="150px" height="150px" /&gt;
&lt;/div&gt;
</code></pre>

<p>The jquery:</p>

<pre><code>           $(document).ready(function(){
              $('.img-view').click(function(){
                  var img=$(this).after('&lt;span id="close"&gt;X Close&lt;/span&gt;').wrap("&lt;div id='pop-up' style='display:block'/&gt;").clone();
                  $('#gallery').append(img);
              });

             $('#close').live("click",function(){
                 $('#pop-up').remove();
                  $('#close').remove();

             });

       });
    &lt;/script&gt;
</code></pre>

<p>The problem that I am having is that the span doesnt get wrapped in the div, but only the image does, and the span is only appended after the image is wrapped. 
The second problem is when I click the #close, the div and the button disappear, but when I click again on the .img-view , they dont regenerate/reappear. why does that happen?</p>

<p><strong>UPDATE</strong></p>

<pre><code>        $(document).ready(function(){
              $('.img-view').click(function(){
                  var img=$(this).clone();
                   img= img.after('&lt;span class="close"&gt;X Close&lt;/span&gt;');
                   img=img.wrap("&lt;div class='pop-up' style='display:block'/&gt;"); 
                  $('#gallery').append(img);
              });

             $('.close').live("click",function(){
                 $('.pop-up').remove();
                  $('.close').remove();

             });

       });
</code></pre>

<p>But now the pop up div doesnt wrap the image element !?!</p>
