nested_formでの動的フォームの実装

前提・実現したいこと

nasted_formを使って動的フォームを実装しようと思っています。
レシピサイトを作成していて材料(material)量(amount)のフォームを
追加、削除できるようにしたいです。
参考サイト[Rails] nested_attributesの使い方

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

フォームを作成することはできたのですが、追加ボタンを押しても追加されません。
エラーは出ていません。

該当のソースコード

class Recipe < ApplicationRecord
  belongs_to :user
  has_one_attached :image
  has_one :chef
  has_many :materials
  accepts_nested_attributes_for :materials, allow_destroy: true

  with_options presence: true do
    validates :video
    validates :title
    validates :text
    validates :image
  end
end

class Material < ApplicationRecord
  belongs_to :recipe

  with_options presence: true do
    validates :vegetable
    validates :amount
  end
end

class RecipesController < ApplicationController
  def index
    @recipes = Recipe.all
  end

  def new
    @recipe = Recipe.new
    @recipe.materials.build
  end

  def create
    @recipe = Recipe.new(recipe_params)
    url = params[:recipe][:video]
    url = url.last(11)
    @recipe.video = url

    if @recipe.save
      redirect_to root_path
    else
      render :new
    end
  end

  def show
    @recipe = Recipe.find(params[:id])
  end

  private

  def recipe_params
    params.require(:recipe).permit(:video, :title, :text, :image,
                                   materials_attributes: [:id, :amount, :vegetable, :_destroy]).merge(user_id: current_user.id)
  end
end

<div class="main">
  <div class="inner">
    <div class="form__wrapper">
      <h2 class="page-heading">レシピ投稿</h2>
        <%= render partial: "form", locals: { recipe: @recipe } %>
    </div>
  </div>
</div>

<%= nested_form_for recipe, url: recipes_path, local: true do |f|%>
  <div class="field">
    <%= f.label :title, "料理名" %><br />
    <%= f.text_field :title, required: true %>
  </div>

  <div class="field">
    <%= f.label :text, "説明文" %><br />
    <%= f.text_area :text, required: true, class: :form__text %>
  </div>

  <div class="form-group">
  <%= f.fields_for :materials do |mf| %>
    <%= mf.label :vegetable %>
    <%= mf.text_field :vegetable %>
    <%= mf.label :amount %>
    <%= mf.text_field :amount %>
    <%= mf.link_to_remove '駆逐してやる！' %>
  <% end %>
  <%= f.link_to_add '前方に20m級！', :materials %>
  </div>


  <div class="field">
    <%= f.label :image, "料理の画像" %><br />
    <%= f.file_field :image %>
  </div>

  <div class="field">
    <%= f.label :video, "Youtube URL" %><br />
    <%= f.text_field :video %>
  </div>

  <div class="actions">
    <%= f.submit "投稿", class: :form__btn  %>
  </div>
<% end %>

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
//= require jquery　←追記
//= require jquery_ujs　←追記
//= require jquery_nested_form

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ProtoSpace</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" defer></script> ←追記
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap" rel="stylesheet">
  </head>

試したこと

参考サイトのコントローラーの書き方ですと

materials_attributes: [:amount, :vegetable]

となっていましたが、nasted_formのgit hubを確認すると
idとdestroyが必要と書かれていたので追加しました。

materials_attributes: [:id, :amount, :vegetable, :_destroy]

しかし、特に変わりはなかったです。
追加はできませんがテーブルへの保存は問題なくできます。

お手数おかけしますが、ご指摘お願いいたします。

neko_daisuki

2020/11/28 04:26

参考サイトにも書いてありますが、jqueryは読み込んでいますか？

yyu202

2020/11/30 05:31

ご返信ありがとうございます。参考サイトを読み直してみたのですがjqueryに関しての文は見つからなかったのですが、どのあたりに書いてありますか？ご指摘通りjqueryはちゃんと導入できていなかったので導入してみましたが変わらず。。。追加ボタンを押してもコンソールに表示されないのでneseted_formのファイルが読み込めていないのだと思うのですが、何故なのかわかりません。追加ボタンの"前方に20m級!"にカーソルを合わせて押したときのコンソールの画像です。（意味あるかわかりませんが。。。） https://drive.google.com/file/d/1rafnuz4ESAaAFFTOWOT_AEeNuUiHGks8/view?usp=sharing 追記部分を該当ソースコードに追加しましたので恐縮ですがご確認いただけますと幸いです。

neko_daisuki

2020/11/30 05:50

ごめんなさい、nested_formについて調べているときに見た記事と混同したみたいです。 https://qiita.com/shota6/items/9e666df9a74ebcf3b1f8 nested_form はかなり古いgemのようで、githubをみるにメンテもされていないようです。 webpacker では動かないのかもしれません。 https://qiita.com/Matsushin/items/4829e12da2834d6e386e

yyu202

2020/12/01 07:20

なるほどですね。試しに参考に載せて頂いたcocoonを試してみたら実装できました！ご回答ありがとうございました。

yyu202

2020/12/01 07:27

ベストアンサーをさせて頂きたいので、もしよろしければ回答の方にcocoonの使用を勧めていただければベストアンサーに投票させて頂きます。よろしくお願いいたします。