JavaScript unexpected object behavior with jQuery
<p>I have two <code>&lt;div&gt;</code> elements, and the following JavaScript code:</p>

<pre><code>var myObject = {
    $input: $('&lt;input /&gt;'),
    insert: function () {
        $('div').append(this.$input);
        $('div').append(' ');
    }
};

myObject.insert();
</code></pre>

<p>This, as I expect, produces an <code>&lt;input&gt;</code> element within each of the two <code>&lt;div&gt;</code> elements.</p>

<p>Now when I create a new instance of <code>myObject</code> and call <code>insert()</code> again I will be expecting 4 <code>&lt;input&gt;</code> elements, two in each <code>&lt;div&gt;</code>. Weirdly, I only get 3 <code>&lt;input&gt;</code> elements!</p>

<p>See example code here: 
<a href="http://jsfiddle.net/FNEax/" rel="nofollow">http://jsfiddle.net/FNEax/</a></p>
