【Rails】クリックすると、月別の一覧データを変化させ表示したい

Question

現状

• Railsで家計簿のアプリを作成しています。
• 現状以下の画像のように該当月の一か月分のデータのみ

一覧で表示されるようになっております。

• これを4月や6月と言ったように前の月や先の月のデータも一覧で表示させたいです。

#したいこと

• 5月の収入の "<<"をクリックすると前の月のデータを表示させるようにしたいです。

(逆に>>をクリックすると次の月のデータを表示させる)

コード

# incomes controller(収入のデータを一覧表示させているviewに対応するcontrollerです。)
class IncomesController < ApplicationController
  require "time"

  before_action :income_id, only: [:show, :destroy, :edit, :update]
  before_action :move_to_root, only: [:show, :edit, :update, :destroy, :search]

  def index
    @spendings_time = Spending.where(date: Time.now.beginning_of_month..Time.now.end_of_month).where(user_id: current_user.id).order(date: "ASC")
    @incomes_time = Income.where(date: Time.now.beginning_of_month..Time.now.end_of_month).where(user_id: current_user.id).order(date: "ASC")
    @this_month = Time.new.month
    @income_sum = @incomes_time.sum(:price)
    @spending_sum = @spendings_time.sum(:price)
    @expense_sum = @income_sum - @spending_sum
    @spending_data = Spending.where(date: Time.now.beginning_of_month..Time.now.end_of_month).where(user_id: current_user.id)
  end

  def new
    @income = Income.new
  end

  def create
    @income = Income.new(income_params)
    if @income.save
      redirect_to root_path
    else 
      render :new
    end
  end

  def show
  end

  def destroy
    @income.destroy
    redirect_to root_path
  end

  def edit
  end

  def update
    if @income.update(income_params)
      redirect_to root_path
    else
      render :edit
    end
  end

  def search
    @spendings = Spending.where(user_id: current_user.id).includes(:user).order(date: "ASC")
  end

  private
  def income_params
    params.require(:income).permit(:price, :category, :memo, :date).merge(user_id: current_user.id)
  end

  def income_id
    @income = Income.find(params[:id])
  end

  def move_to_root
    if current_user.id != @income.user.id
      redirect_to root_path
    end
  end
end

# incomes/index.html.erb(一覧表示させているviewです)

<div class="left-content">
        <div class="title"><%= @this_month %>月の支出</div>
        <div class="post-list-content">
          <% @spendings_time.each do |spending| %>
            <ul class="post-list">
              <li class="post-list-data-date"><%= spending.date %></li>
              <ul>
                <li><%= link_to '詳細', spending_path(spending.id), class:"link_pass" %></li>
                <li><%= link_to '編集', edit_spending_path(spending.id), class:"link_pass" %></li>
                <li><%= link_to '削除', spending_path(spending.id), class:"link_pass", method: :delete %></li>
              </ul>
              <li class="post-list-data"><%= spending.category %></li>
              <li class="post-list-data"><%= image_tag 'money.png', size: '50x50' %>¥<%= spending.price %></li>
            </ul>
          <% end %>
        </div>
      </div>
      <div class="center-content">
        <div class="title"><span class="arrow-last-month" id="last-month-data-arrow"><<</span><%= @this_month %>月の収入<span class="arrow-next-month">>></span></div>
          <div class="post-list-content">
            <% @incomes_time.each do |income| %>
              <ul class="post-list">
                <li class="post-list-data-date"><%= income.date %></li>
                <ul>
                  <li><%= link_to '詳細', income_path(income.id), class:"link_pass" %></li>
                  <li><%= link_to '編集', edit_income_path(income.id), class:"link_pass" %></li>
                  <li><%= link_to '削除', income_path(income.id), class:"link_pass", method: :delete %></li>
                </ul>
                <li class="post-list-data"><%= income.category %></li>
                <li class="post-list-data"><%= image_tag 'money.png', size: '50x50' %>¥<%= income.price %></li>
              </ul>
            <% end %>
          </div>
      </div>

#　試したこと

• ① incomes/index.html.erbファイルの19行目の以下のidを取得する

<span class="arrow-last-month" id="last-month-data-arrow"><<</span>

• ② index.jsファイルを作成し、以下のように記述し、クリックするとデータを書き換えるようにする

# index.js

window.addEventListener('load', function(){
  const lastMonthDataArrow = this.document.getElementById("last-month-data-arrow") 
  lastMonthDataArrow.addEventListener('click', function(){
    const postList = document.getElementById("post-list-content")
    postList.innerHTML = ""
  })
})

#　聞きたいこと

私の試したことであると、innerHTMLの中に記述するものがわかりませんでした。
また、"<<"をクリックするとinnerHTMLによって書き換えるときに先月のデータを取得する方法がわかりませんでした。

それともAjax通信などを使う方がよろしいのでしょうか?
アクションプランでもやり方はこうしたほうがいいなど教えていただけたら幸いです。

どなたかご教示いただけると幸いです。