jQueryの動的フォームで追加した値を全て保存したい

Question

前提・実現したいこと

プログラミング初学者です。よろしくお願いします！
RailsとjQueryを使った実装にて、動的フォーム(jQuery)で追加したフォームを、Railsを通してデータベース(MySQL)に全て保存したいです。

(料理の味付け法を共有するサイトを作っています。ややこしいのでレシピサイトのようなものと同じと考えてくださって大丈夫です)

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

エラー文はconsole、ターミナルともに起こっていません。
データベースへの保存のみ出来ていません。

該当のソースコード

コントローラー
tastes_controller

class TastesController < ApplicationController
  def index
    @taste = Taste.all
  end

  def new
    @taste = Taste.new
    # @taste.build_seasoning
    # @taste.seasonings.build
    #親モデルとアソシエーションを組んでいる子モデルのインスタンスを生成
  end

  def create
    # @taste = Taste.new(taste_params)
    # if @taste.save
    # redirect_to root_path
    @taste = Taste.create(taste_params)
    if @taste.save
      redirect_to root_path
     else
       render :new
     end
  end

  private

  def taste_params
    params.require(:taste).permit(:title, :example, :image, :genre_id, seasoning_attributes: [:seasoning_name, :quantity]).merge(user_id: current_user.id)
  end
end

モデル
taste.rb

class Taste < ApplicationRecord
  has_one_attached :image
  belongs_to :user
  has_one :seasoning
  accepts_nested_attributes_for :seasoning, allow_destroy: true
  extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to :genre
  
  with_options presence: true do
    validates :image
    validates :title
    validates :example
    validates :genre_id, numericality: { other_than: 1 }
    validates :user_id
  end
  
end

モデル
seasoning.rb

class Seasoning < ApplicationRecord
  belongs_to :taste, optional: true
end

ビュー
new.html.erb

<%= render "/shared/header" %>

<div class="inner-contact">
    <div class="contact-form">
        <%= form_with(model: @taste, local: true) do |f| %>
         <%#エラーメッセージの表示 %>
          <%= render "shared/error_messages", model: f.object, class: "error-messages" %>
           <div class= "form">
             <div class="form_left">
                <div class="weight-darkcyan-text">
                     テイスト名
                  </div>
                <%= f.text_area :title, class:"taste_title", placeholder:"例) 濃厚ケチャップ味" %>
                <div class="weight-darkcyan-text">
                     使用例の料理写真
                 </div>
                <%= f.file_field :image, class:"taste_image" %>
                  <div class="weight-darkcyan-text">
                   おすすめジャンル
                  </div>
                <%= f.collection_select(:genre_id, Genre.all, :id, :name, {}, {class:"select-box", id:"create-hour"}) %> 
                  <div class="weight-darkcyan-text">
                       作った料理
                  </div>
               <%= f.text_field :example, class:"how_to_cooks", placeholder:"例) 唐揚げ" %>
             </div>
             <div class="form_right">
               <%= f.fields_for :seasoning, @taste.build_seasoning do |seasoning| %>
                  <div class="seasoning_field" id="seasoning_field[0]">
                     <%= seasoning.text_field :seasoning_name, class:"seasoning_name", placeholder:"例) 醤油", name:"seasoning_name[0]", id:"seasoning_name[0]" %>
                     <%= seasoning.text_field :quantity, class:"quantity", placeholder:"例) 大さじ2", name:"quantity[0]",id:"quantity[0]" %>
                  </div>
                  <%= f.button '+', id: "add_btn", type: "button" %>
               <% end %>
             </div>
           </div>
          <%= f.submit "submit", class:"form-btn semibold" %> 
        <% end %> 
    </div>
</div>

<%= render "/shared/footer"%>

JS
taste.js

 $(function(){
   // フォームカウント
   var frm_cnt =0;
   // クローンする
   $('#add_btn').on('click', function(){
     var original = $('#seasoning_field\[' + frm_cnt + '\]');
     var originCnt = frm_cnt;

     frm_cnt++;

     original
     .clone()
     .appendTo(original)
     .attr('id', 'seasoning_field[' + frm_cnt + ']')
     .end()
     .find('input, text_field').each(function(idx, obj) {
        $(obj).attr({
          id: $(obj).attr('id').replace(/[[0-9]]+$/, '[' + frm_cnt + ']'),
          name: $(obj).attr('name').replace(/[[0-9]]+$/, '[' + frm_cnt + ']')
         });
         $(obj).val('');
       });
  });
});

試したこと

• Rubyでform内の値をデータベース保存する方法はこちらを参照しました。

https://qiita.com/nakasato_minami/items/5015319292c9f8a93f34

• レシピサイトの作成で同様に動的フォームの作成、保存をしている方も参照させていただきました。

https://teratail.com/questions/264073

いろいろいじってた結果、こちらの記述を変更した時のみデータベースへの保存が可能になりました。(レコード一つのみでしたが,,,)

<%= f.fields_for :seasoning, @taste.build_seasoning do |seasoning| %>
                  <div class="seasoning_field" id="seasoning_field[0]">
                     <%= seasoning.text_field :seasoning_name, class:"seasoning_name", placeholder:"例) 醤油", name:"seasoning_name[0]", id:"seasoning_name[0]" %>
                     <%= seasoning.text_field :quantity, class:"quantity", placeholder:"例) 大さじ2", name:"quantity[0]",id:"quantity[0]" %>
                  </div>
                  <%= f.button '+', id: "add_btn", type: "button" %>
               <% end %>

↑こちらのname属性の、**name:"seasoning_name[0]"とname:"quantity[0]"**を削除した場合、最下層に追加した値のみ、データベースへ保存されました。

ちなみコンソール上ではformの追加はされてるように見受けられます。
https://gyazo.com/61550f3891bd44baf2c3d16ce9b6254a

補足情報（FW/ツールのバージョンなど）

Ruby on Rails 6
DBはMySQLを使用しています。

自己分析

binding.pryでtaste_paramsを確認。
taste_params[:quantity]で確認するとnilに、、
seasoningsテーブルへの保存処理に問題あり？

• コントローラーとモデルの確認
• おあとjQueryの記述方が正しいか、学習も兼ねて復習。(特にname属性について)

    13: def create
 => 14:   binding.pry   
    15:   @taste = Taste.create(taste_params)
    16:   if @taste.save
    17:     redirect_to root_path
    18:    else
    19:      render :new
    20:    end
    21: end


[1] pry(#<TastesController>)> taste_params[:quantity]
=> nil
[2] pry(#<TastesController>)> taste_params[:title]
=> "濃厚ケチャップ味"

自己分析追記
テーブル設計の問題かと思い、アソシエーションの確認。
初期では1対1で考えていたが、レコードを複数保存すると考えると1対多では？と思い、テーブル、アソシエーションを修正。状況変わらず。
そもそもname属性がなくてもformの追加ができている→nameではないもので値を取得している？
怪しいのはid?