title: jQuery select one HTML element generated by Rails loop
body: <p>I am a beginner with Rails and jQuery. I have a view in a Rails app which contains pictures for each User in the database. The user photos are generated with a .each loop, and an  HTML element. And what I want jQuery to do is this: when I mouseover one of the  HTML elements, I want it to expand to include some content. But I only want ITS content to expand, not all of the other contents with the same class name! How can I do this?</p>
  
  <p>Here's the view:</p>
  
  <pre><code>&lt;ul class="thumbnails"&gt;
  &lt;% @users.each do |user| %&gt;
      &lt;li class="span2-thumb"&gt;
      &lt;a href=&lt;%= user_path(user) %&gt; class="thumbnail"&gt;
        &lt;img src=&lt;%= user.photo_url(:thumb).to_s %&gt;&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  
      &lt;li class="span2-info hidden"&gt;
        &lt;div class="thumbnail"&gt;
          &lt;img src=&lt;%= user.photo_url(:thumb).to_s %&gt;&gt;
          &lt;p&gt;
             Content...
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/li&gt;
  
    &lt;% end %&gt;
  &lt;% end %&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And here's the Javascript:</p>
  
  <pre><code>$('.span2-thumb').on({
      mouseenter: function(evt) {
          $('.span2-thumb').addClass('hidden');
          $('.span2-info').removeClass('hidden');
      }
  });
  $('.span2-info').on({
      mouseleave: function() {
          $('.span2-info').addClass('hidden');
          $('.span2-thumb').removeClass('hidden');
      }
  });
  </code></pre>
  
  <p>One option would be to create custom class names for each user image. I can do this without issue, by appending the user.id to the class name. But then I have the problem that I can't write a script to identify each unique class name!</p>
  
  <p>Any suggestions appreciated. Thanks!</p>