How to add "Click to close" functionality to each <div>?
<p>My web app may display messages from time to time. Some of the messages are information:</p>

<pre><code>&lt;div class="message"&gt;Here is some info.&lt;/div&gt;
</code></pre>

<p>and some of the messages are errors:</p>

<pre><code>&lt;div class="error message"&gt;jQuery is not your friend.&lt;/div&gt;
</code></pre>

<p>I want users to be able to clear informational messages from the screen, but the errors need to stay, and I thought I could do it by adding a click-to-close feature on each message.</p>

<p>This <em>sort of</em> works :)</p>

<pre><code>$(document).ready(function() {
  $('.message:not(.error)').each(function() {
    theBox = this;
    $(theBox).css('cursor','pointer')
             .attr('title','Click to close')
             .click( function(){ $(theBox).fadeOut( 1000 ); })
  });
});
</code></pre>

<p>Sort of. It works fine if there is only one info message on the screen, but if there are two messages only the second one gets hidden, whichever box I click.</p>

<p>Can you please help me tell each <code>&lt;div&gt;</code> to close itself when clicked?</p>
