title: jQuery move a div after another div inside a div using insertAfter
body: <p>I'm failing at the following since 2 hours. I'm trying to move the <code>div id="msg"</code> after the <code>div class="meta anchor"</code> when <code>&lt;i class="icon-delete delete"&gt;&lt;/i&gt;</code> is clicked. The whole thing has me in knots, because of the way it's structured.</p>
  
  <p>I've marked where the div id="msg" should move to. Can you pls help? My failed efforts are below.</p>
  
  <pre><code>    &lt;div class="reQ"&gt;
          &lt;div class="post"&gt;
              &lt;div class="entry"&gt;
                  &lt;div class="links"&gt; 
                      &lt;div class="icons"&gt;&lt;i class="icon-delete delete"&gt;&lt;/i&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="meta anchor"&gt;
                      Content
                  &lt;/div&gt;
                  !-- div id="msg" goes here --!
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="msg"&gt;Div with Message&lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('.delete').live('click', function() {
  
      var self = $(this);
      // $('#msg').insertAfter(self.parent()).show();
      // self.parent().after('.msg');
  
      self.parents('.reQ').$('#msg').insertAfter('.anchor').show();
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/dhR36/" rel="nofollow">Fiddle</a></p>
  
  <p><strong>Edit</strong>
  The html part repeats several times on the page. It holds posts. I need the <code>msg</code> to go under only the post where the icon was clicked.</p>