jquery - 「閉じる」をクリックしてもJQuery divが非表示にならない

Question

JQuery に関する初歩的な質問があります (私が確信していること)。

画像がクリックされたときに div ポップアップを作成しようとしています。(ところで、これは 1 つのページに複数のインスタンスがあります。)

ただし、「閉じる」をクリックしてもdivは閉じません。

これがJQueryです...

$(document).ready(function() {
// Set up bubble CSS when page is loaded so bubble info is hidden unless user acts.
// If JavaScript is turned off bubble info displays normally.
//
//

  $('.bubble_wrapper').css('position', 'relative');
  $('.bubble_info').css({
    position: 'absolute',
    display: 'none'
  });
  $('.bubble_close').css('display', 'block');
});

$(function() {
  var counter = 1;
  $('.bubble_wrapper').each(function() {
    var trigger = $('#bubble_trigger'+counter, this);
    var popup = $('#bubble_info'+counter, this);

    $([trigger.get(0), popup.get(0)]).click(function() {
      $('.bubble_info').css('display', 'none');
      popup.css('display', 'block');
    });

    $('.bubble_close').click(function() {
      $('.bubble_info').css('display', 'none');
    });

    counter += 1;
  });
}); 

そして、これがhtmlです（私はRailsで作業しています）...

<section id="latest_articles">
  <ul>
    <% id_counter = 1 %>
    <% @articles.each do |article| %>
      <li class="bubble_wrapper">
        <%= image_tag(article.image_url(:thumb), :class => "bubble_trigger", :id => "bubble_trigger"+id_counter.to_s) if article.image? %>
        <div class="bubble_info" id=<%= "bubble_info"+id_counter.to_s %> >
          <h1><%= link_to article.title, article %></h1>
          <p><%= article.description %></p>
          <a class="bubble_close">Close</a>
        </div>
      </li>
      <% id_counter += 1 %>
    <% end %>
  </ul>
</section>

前もって感謝します！