moving an appended input after clicked span.
<p>Im working on a text editor simulation that appends an input to a div, and extracts its values to create spans, here is the initial click() function: </p>

<pre><code>var $cursorStart= $("#cursor-start");

$("#main-edit").click( function() {
var cursorExists = $("#cursor").length;
if (!cursorExists){
   $cursorStart.append("&lt;input type='text' id = 'cursor' /&gt;");
   $("#cursor").markCursor();

}
   if (cursorExists){
    $("#cursor").focus();

}

});
</code></pre>

<p>When I start typing, spans are inserted before the input: </p>

<pre><code>jQuery.fn.enterText = function(e){
var $cursor = $("#cursor");
if( $cursor.val() &amp;&amp; e.keyCode != 32  ){
    var character = $("#cursor").val();
    $cursor.val("");
    character = character.split("").join("&lt;/span&gt;&lt;span class='text'&gt;");
    $("&lt;span class = 'text'&gt;"+character+"&lt;/span&gt;").insertBefore($cursor);



}
</code></pre>

<p>What I want to know now is, how can I move the input (cursor) around (basically be inserted after a clicked span).</p>

<pre><code>&lt;span&gt;a&lt;/span&gt;
&lt;span&gt;b&lt;/span&gt;
&lt;span&gt;c&lt;/span&gt;
&lt;span&gt;d&lt;/span&gt;
</code></pre>

<p>clicking near a and b would result in an input after "a". These are spans that are dynamically added.</p>
