<h1><%= @user.name %></h1>

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#" class="js-previous">Next family member's payments...</a></li>
  </ul>
</nav>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <h3>Your payments include the following...</h3>
    <ul>
      <% @user.payments.each do |payment| %>
        <li>$<%= payment.amount %> spent at <%= payment.store%> on <%= payment.created_at.month %>/<%= payment.created_at.day %>/<%= payment.created_at.year %></li>
      <% end %>
    </ul>
    <div class="payments"></div>
  </div>
</div>

<h1 class="name"><%= @user.name %></h1>

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#" class="js-previous" plan-id="<%= @user.current_plan.id %>" user-id="<%= @user.id %>">Next family member's payments...</a></li>
  </ul>
</nav>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <h3>Your payments include the following...</h3>
    <ul>
      <% @user.payments.each do |payment| %>
        <li>$<%= payment.amount %> spent at <%= payment.store%> on <%= payment.created_at.month %>/<%= payment.created_at.day %>/<%= payment.created_at.year %></li>
      <% end %>
    </ul>
    <div class="payments"></div>
  </div>
</div>

<script type="text/javascript" charset="utf-8">
$(function () {
  $(".js-previous").on("click", function(event) {
    event.preventDefault();
    var planId = parseInt($(".js-previous").attr("plan-id"));
    var userId = parseInt($(".js-previous").attr("user-id"));
    var id = userId;
    var ids = [];
    $.get("/plans/" + planId + ".json", function(data) {
      var users = data["users"];
      $.each(users, function(i, user) {
        ids.push(user["id"]);
      });
      console.log(ids)
      // re-set the id to current on the link
      $(".js-previous").attr("user-id", data["id"]);
    });

  });
});
</script>

Add javascript to attempt to render show resource
Add javascript to attempt to render show resource
