Используйте кнопку JQuery Next для перехода к следующему клубу

У меня есть кнопка, которая при нажатии должна вызывать следующий клуб в DOM без обновления. Один раз работает для следующего клуба, но после этого не работает. Мне нужно как-то изменить идентификатор клуба на кнопке, чтобы API мог получать информацию о следующем клубе. Я не уверен, как лучше это сделать. Любые идеи?

 <div class = "container-fluid">
  <h1>Your Club</h1>
  <br>
    <div id = "club-info">
    <h2 class = "club-name"><%= @club.name %></h2>
    <br>
    <h2 class = "club-brand"><%= @club.brand %></h2>
    </div>
  <br>
  <button class = "next-club" data-id = "<%= @club.id %>">Next Club</button>
  <br>
  <br>
  <%= link_to "See all of your clubs", club_path %>
</div>

<script type = "text/javascript" charset = "utf-8">
  $(function() {
    $('.next-club').click(function() {
      var id = $(this).data("id");
      $('#club-info').html('')
      $.get('/clubs/' + id + '/next', function(data, status) {
        $('#club-info').append(`<h2>${data.name}</h2>` + 
          `<br>` + 
          `<h2>${data.brand}</h2>`);
      })
    }) 
  });
</script>