Cannot call extended method on JQuery object
<p>I have HTML something like the following:</p>

<pre><code>&lt;div id="quoteContainer"&gt;
    &lt;div class="quote prototype"&gt;&lt;/div&gt;
     &lt;div class="quote live q0"&gt;&lt;/div&gt;
     &lt;div class="quote live q1"&gt;&lt;/div&gt;
     &lt;div class="quote live q2"&gt;&lt;/div&gt;
     &lt;div class="quote live q3"&gt;&lt;/div&gt;
     ...
&lt;/div&gt;
</code></pre>

<p>Where each of the live divs are coppies of the prototype div. Here is the code that makes the copy:</p>

<pre><code>quote = $(".quote.prototype").clone().show()
        .removeClass("prototype").addClass("live")
        .addClass(foo)
        .appendTo("#quoteContainer");

$.extend(quote, QuoteCalculator);
quote.setQuoteClass(foo);
</code></pre>

<p>Foo is a variable that combines "q" and the number of quotes. The QuoteCalculator class has several methods which I want to call, including (ex.) shout(). Here is part of QuoteCalculator:</p>

<pre><code>var QuoteCalculator = {
    ...

    shout: function() {
        console.log("hello from calculator");
    },

    ...
};      
</code></pre>

<p>At another point in the program, I want to call the shout method. Here is my code:</p>

<pre><code>$(".quote.live").each(function() {
      this.shout();
});
</code></pre>

<p>Here is what firebug says: 
this.shout is not a function
[Break On This Error] this.shout(); </p>

<p>EDIT: Here  is the weird part: calling quote.setQuoteClass(foo) does not generate an error. On the contrary, it works perfectly.</p>

<p>Why does the problem occur, what causes it, and how do I fix it?</p>
