title: Append a tag box inside an image after clicking on it
body: <p>I'm trying to make a photo tag plugin for my website. I have long way to go. I know there are other actual plugins but I want to create my own here. The question is I was trying to make a box appear on a image after clicking it, it is not appearing, it is not appending on the image.</p>
  
  <pre><code>&lt;head&gt;
      &lt;style&gt;
      #imageHolder {
          position:relative;
          border:dashed 2px #7E7E7E;
          min-width:300px;
          min-height:300px;
          box-shadow:0 0 5px #000;
          cursor:pointer;
          float:left;
          }
          #tag
          {
            position:absolute;
            top:0;left:0;
            width:250px;
          }
          #box
          {
            border:solid 3px #000;
            width:100px;
            height:100px;
            float:left;
          }
      &lt;/style&gt;
  
      &lt;script style = "text/javascript"&gt; 
        $(document).ready(function(){
          var mouseX = 0;
          var mouseY = 0;
          $("#imageHolder img").click(function(e){
            var imgBox = $(this).parent();
            mouseX = e.pageX - $(imgBox).offset().left;
            mouseY = e.pageY - $(imgBox).offset().top;
            $('#tag').remove();
            $(imgBox).append('&lt;div id = "tag"&gt;&lt;div id="box"&gt;&lt;/div&gt;&lt;/div&gt;');
            $('#tag').css({top:mouseY,left:mouseX});
          });
      });
      &lt;/script&gt; 
      &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id = "imageHolder"&gt;
  &lt;img src = "test.jpg"/&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What is the problem with this code?</p>