title: Unexpected result with jQuery.after
body: <p>I have an application with nearly 70 items in a <code>&lt;select&gt;</code> that allow multiple selection.</p>
  
  <p>I'm trying to replace its behavior by two lists, where the user can drag/drop between a source list to a target list. The initial select should reflect the moves.</p>
  
  <p>I'm trying to make it generic because I have to reuse the behavior in several pages, sometimes several times in the same page.</p>
  
  <p>What I have by now (I reduced the actual number of items for readability) :</p>
  
  <pre><code>&lt;div style="border: solid 1px red; overflow:auto"&gt;
      &lt;select name="lst1" multiple="multiple" id="lst1" class="go"&gt;
          &lt;option value="1"&gt;Element N°1&lt;/option&gt;
          &lt;option value="2"&gt;Element N°2&lt;/option&gt;
          &lt;option selected="selected" value="3"&gt;Element N°3&lt;/option&gt;
          &lt;option value="4"&gt;Element N°4&lt;/option&gt;
          &lt;option value="5"&gt;Element N°5&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function () {
          $(".go").each(function (index, el) {
              var source = document.createElement("ul");
              var target = document.createElement("ul");
              $(el).after(source);
              $(el).after(target);
              $(source).addClass("sourceItems");
              $(target).addClass("targetItems");
              $(el + "option:selected").each(function (index2, sub) {
                  var item = document.createElement("li");
                  item.textContent = $(sub).text();
                  $(target).append(item);
              });
              $(el + "option:not(:selected)").each(function (index2, sub) {
                  var item = document.createElement("li");
                  item.textContent = $(sub).text();
                  $(source).append(item);
              });
  
              $(source).sortable({ connectWith : target});
              $(target).sortable({ connectWith : source });
          });
      });
  
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;    
  .sourceItems, .targetItems { list-style-type: none; float:left; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 200px; border: solid 1px black; } 
  .sourceItems li, .targetItems li { margin: 5px; padding: 5px; width: 180px; height: 12px; cursor: move; }
  &lt;/style&gt;
  </code></pre>
  
  <p>This code is producing unexpected result :</p>
  
  <p><img src="https://i.stack.imgur.com/3pbjW.png" alt="enter image description here"></p>
  
  <p>The "target" list's generated DOM looks like ok :</p>
  
  <pre><code>&lt;ul class="targetItems ui-sortable"&gt;
  &lt;li&gt;Element N°3&lt;/li&gt;
  &lt;li&gt;Element N°7&lt;/li&gt;
  &lt;li&gt;Element N°8&lt;/li&gt;
  &lt;li&gt;Element N°14&lt;/li&gt;
  &lt;li&gt;Element N°20&lt;/li&gt;
  &lt;li&gt;Element N°15&lt;/li&gt;
  &lt;li&gt;Element N°21&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>but the "source" list's generated DOM is a mess (it contains the page DOM in each element)):</p>
  
  <pre><code>&lt;li&gt;
      .sourceItems, .targetItems { list-style-type: none; float:left; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 200px; border: solid 1px black; } 
      .sourceItems li, .targetItems li { margin: 5px; padding: 5px; width: 180px; height: 12px; cursor: move; }
  &lt;/li&gt;&lt;li&gt;
  
  &lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;
      .sourceItems, .targetItems { list-style-type: none; float:left; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 200px; border: solid 1px black; } 
      .sourceItems li, .targetItems li { margin: 5px; padding: 5px; width: 180px; height: 12px; cursor: move; }
  
      Element N°1
      Element N°2
      Element N°3
      Element N°4
      Element N°5
      Element N°6
      Element N°7
      Element N°8
      Element N°9
  
  ...
  
  Element N°3Element N°7Element N°8Element N°14Element N°15Element N°20Element N°21Element N°23Element N°27Element N°29Element.
  </code></pre>
  
  <p>I can't see what's wrong. I'd appreciate someone points me the root of the issue.</p>
  
  <p>Here is a jsfiddle that show the issue : <a href="http://jsfiddle.net/gsYHb/" rel="nofollow noreferrer">http://jsfiddle.net/gsYHb/</a></p>
  
  <p><strong>[edit]</strong> If i reverse the order of creating the source and target elements, the problem occurs on the other list :</p>
  
  <pre><code>        var source = document.createElement("ul");
          var target = document.createElement("ul");
          $(el).after(target);
          $(el).after(source);
  </code></pre>
  
  <p>in this case, this is the target list that is messy.</p>