How to get jQuery to treat elements individually?
<p>In the following code I create ten elements and pass them all to jQuery code to get functionality. However, when I click on one, the click event fires for all of them. How do I have to change this code so that when I click on one of them, it only fires the event in that element?</p>

<p><strong>html/php:</strong></p>

<pre><code>&lt;?php
    for ($x = 0; $x &lt; 10; $x++) {
        $r .= '&lt;div class="testItem"&gt;&lt;span class="title"&gt;title1&lt;/span&gt;&lt;span class="message"/&gt;&lt;/div&gt;';
    }
?&gt;  
&lt;script type="text/javascript"&gt;
    $(function() {
        TESTITEM.initialize($('.testItem'));
    });
&lt;/script&gt;
</code></pre>

<p><strong>javascript:</strong></p>

<pre><code>var TESTITEM = TESTITEM || {};

TESTITEM.initialize = function(elemTest) {
    var elemTitle;

    this.defineVariables = function() {
        elemTitle = elemTest.find('.title');
        elemMessage = elemTest.find('.message');
    }

    this.functionalizeElements = function() {
        elemTitle.click(function(e) {
           elemMessage.html('done'); 
        });
    }

    this.decorateElements = function() {
        elemTitle.css('color','brown');
    }

    this.defineVariables();
    this.decorateElements();
    this.functionalizeElements();
}
</code></pre>

<h2>ADDENDUM:</h2>

<p>When I change it to this, and I click on any element, only the last element shows the text:</p>

<pre><code>$('.testItem').each(function(){
    TESTITEM.initialize($(this));
})
</code></pre>
