Unexpected result with jQuery.after - jquery-ui

Question

I have an application with nearly 70 items in a <select> that allow multiple selection.
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.
I'm trying to make it generic because I have to reuse the behavior in several pages, sometimes several times in the same page.
What I have by now (I reduced the actual number of items for readability) :
<div style="border: solid 1px red; overflow:auto">
<select name="lst1" multiple="multiple" id="lst1" class="go">
<option value="1">Element N°1</option>
<option value="2">Element N°2</option>
<option selected="selected" value="3">Element N°3</option>
<option value="4">Element N°4</option>
<option value="5">Element N°5</option>
</select>
</div>
<script type="text/javascript">
$(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 });
});
});
</script>
<style type="text/css">
.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; }
</style>
This code is producing unexpected result :
The "target" list's generated DOM looks like ok :
<ul class="targetItems ui-sortable">
<li>Element N°3</li>
<li>Element N°7</li>
<li>Element N°8</li>
<li>Element N°14</li>
<li>Element N°20</li>
<li>Element N°15</li>
<li>Element N°21</li>
</ul>
but the "source" list's generated DOM is a mess (it contains the page DOM in each element)):
<li>
.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; }
</li><li>
</li><li></li><li>
.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.
I can't see what's wrong. I'd appreciate someone points me the root of the issue.
Here is a jsfiddle that show the issue : http://jsfiddle.net/gsYHb/
[edit] If i reverse the order of creating the source and target elements, the problem occurs on the other list :
var source = document.createElement("ul");
var target = document.createElement("ul");
$(el).after(target);
$(el).after(source);
in this case, this is the target list that is messy.

Answer 1

As you will see in http://jsfiddle.net/stevebeauge/gsYHb/6/, I have been able to solve my issue.
It was due to the $(this + "option:not(:selected)") selector that was returning the whole page.
Replacing this code with $(this).children("option:not(:selected)") make the script works (+ some other minor fixes)