jQueryを使ってフォームを1つずつ表示できるようにしたい。

前提・実現したいこと

フォームに１０個表示されているフォームをjQueryを使って１つずつ表示されるようにしたいです。

発生している問題・エラーメッセージ

外部サイトを参考にフォームの数を増やしました。
jQueryを使ってフォームを動的に追加削除できるようにしたいのですが、removeメソッドでフォームを消すとDBにデータが保存されなくなってしまいました。

該当のソースコード

ruby
1class MenusController < ApplicationController
2  def index
3    @menus = Menu.all.order(created_at: :desc).includes(:user)
4  end
5
6  def new
7    @form = Form::MenuCollection.new
8  end
9
10  def create
11    @form = Form::MenuCollection.new(menu_collection_params)
12    if @form.save
13      redirect_to root_path
14    else
15      render :new
16    end
17  end
18
19  private
20
21  def menu_collection_params
22    params.require(:form_menu_collection).permit(menus_attributes: [:training_date, :part, :training, :weight, :rep,:memo]).merge(user_id: current_user.id)
23  end
24
25
26end

ruby
1class Form::Base
2  include ActiveModel::Model
3  include ActiveModel::Callbacks
4  include ActiveModel::Validations
5  include ActiveModel::Validations::Callbacks
6end

ruby
1class Form::MenuCollection < Form::Base
2  FORM_COUNT = 3
3  attr_accessor :menus,:user_id
4
5  def initialize(attributes = {})
6    super attributes
7    self.menus = FORM_COUNT.times.map { Menu.new() } unless self.menus.present?
8  end
9  
10
11  def menus_attributes=(attributes)
12    self.menus = attributes.map{ |_, v| Menu.new(v) }
13  end
14
15
16
17  def save
18      Menu.transaction do
19      self.menus.map do |menu|
20        if menu.present? 
21          menu.save
22        end
23      end
24    end
25    return true
26  rescue => e
27    return false
28end
29end

ruby
1class Menu < ApplicationRecord
2  belongs_to :user
3  validates :training_date, presence: true
4  validates :part, presence: true
5  validates :training, presence: true
6  validates :rep, presence: true
7end
8

ruby
1class User < ApplicationRecord
2  # Include default devise modules. Others available are:
3  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
4  devise :database_authenticatable, :registerable,
5         :recoverable, :rememberable, :validatable
6  has_many :menus
7  accepts_nested_attributes_for :menus
8
9  validates :nickname, presence: true
10
11end

<div class="new-training">

<%= form_with model: @form,url: menus_path, method: :post,local: true do |f|%>

<%= f.fields_for :menus do |i|%>
<div class="menu-forms">
  
  <div class="taraining-date">
    <%= i.label :training_date,"日付",id:"date" %><br />
    <%= i.datetime_field :training_date %>
  </div>

  <div class="menu-form">
    <%= i.label :training, "種目" %><br />
    <%= i.text_field :training,id:"menu_training" %>
  </div>

  <div class="menu-form">
    <%= i.label :weight, "重量" %><br />
    <%= i.number_field :weight,id:"menu_weight" %>kg
  </div>

  <div class="menu-form">
    <%= i.label :rep, "rep" %><br />
    <%= i.number_field :rep,id:"menu_rep" %>回
  </div>

  <div class="hidden-content">
    <%= i.hidden_field :part ,:value => "胸", id:"menu_part" %>
  </div>

  </div>
  <% end %>

  <div class="menu-low">
  <div class="memo">
    <%= f.label :memo, "MEMO" %><br />
    <%= f.text_area :memo,id:"menu_memo" %>
  </div>

  <div class="menu-submit">
    <button type="submit" class="btn">記録する</button>
  </div>
  </div>
  <% end %>
</div>

jQuery
1$(function() {
2
3  // button
4  const btn_clone = $('#btn-clone');  // 追加ボタン
5  const btn_remove = $('#btn-remove');  // 削除ボタン
6
7  // clone
8  btn_clone.click(function() {
9    
10    var text = $('.menu-forms');  // 
11
12		text
13      .last()
14      .show();
15      
16    
17    if ($('.menu-forms').length >= 2) {
18      $(btn_remove).show();  // inputが2つ以上あるときに削除ボタンを表示
19    }
20
21  });
22
23  // remove
24	btn_remove.click(function() {
25  
26    $('.menu-forms')
27    .last()
28    .hide();
29
30
31    if ($('.menu-forms').length < 2) {
32      btn_remove.hide();  // inputが2つ未満のときに削除ボタンを非表示
33    }
34    
35  });
36});
37