fields_forを複製、初期化

Question

前提・実現したいこと

複数の場所の情報を持った投稿を作成する機能を実装したいです。(1つのpostに対して複数のspot)
そのために、
①新規投稿フォームの一部(fields_for部分)を複製し、値を初期化した状態で配置
②コピー元のフォームも含めて、fields_forのデータをすべて別のレコードとして保存
という処理を行いたいのですが、方法がわからずハマっています。

具体的には、
「フォームを追加」をクリックすると、fields_forを囲った<div>のクローンが、入力された値が初期化された状態で下に追加される。
「投稿」ボタンをクリックしたときに、ページ内のすべてのフォームのデータが保存される(postとそれに紐付いたspotすべて)。というのを想定しています。

spotモデルには、post_id属性を持たせており、同一のpost_idを持ったレコードは1つのpostに紐付いている状態です。

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

現状のコードでは、
・追加されたフォームには、コピー元のフォームに入力された値が残った状態で追加される
・フォームを追加した場合、最後に追加されたフォームのデータしか保存されない
(コピー元や、コピー元と最後のフォームに挟まれたフォームが保存されない)

該当のソースコード

post.rb

  belongs_to :user
  has_many :spots, dependent: :destroy
  accepts_nested_attributes_for :spots
  mount_uploader :image, ImageUploader

spot.rb

  belongs_to :post
  mount_uploader :image, ImageUploader

  validates :title, length: {maximum: 30}
  #validates :post_id, presence:true
  validates :content, presence:true, length: { maximum: 140 }
  validate :image_size

  #住所を変換して、緯度をlattude、経度をlongitudeに保存
  geocoded_by :address
  after_validation :geocode

posts_controller.rb

def new
    @post = Post.new
    @post.spots.build
  end

def create
    @post = current_user.posts.build(post_params)
    @post.save
    redirect_to root_path
  end

def post_params
    params.require(:post).permit(:content, spots_attributes: [:address, :image, :content, :title])
  end

posts/new.html.erb

<div class="container">
  <h1 class="form-heading">投稿する</h1>
  <%= form_with model: @post do |f|%>
    <div class="field">
      <%= f.text_area :content, placeholder: "post.content"%><br>
      <div id="forms">
        <div class="spot-form">
          <%= f.fields_for :spots do |s| %>
            <%= s.text_field :title, placeholder: "title"%><br>
            <%= s.text_field :address, placeholder: "address"%><br>
            <%= s.text_area :content, placeholder: "spot.content"%>
            <span class="image">
              <%= s.file_field :image, accept: 'image/jpeg,image/gif,image/png' %>
            </span><br>
          <% end %>
        </div>
      </div>
    </div>
    <div class="btn btn-primary" id="add-form">フォームを追加</div>
    <%= f.submit "投稿", class: "btn btn-primary" %>
    
  <% end %>
  
</div>

<!-- フォームの追加 -->
<script>
$(function(){
  $('#add-form').on('click',function(){
    var clone = $('#forms .spot-form:first').clone(true);
    clone.appendTo('#forms')
  });
});
</script>

spotsテーブル

t.string :title
t.text :content
t.string :image
t.string :address
t.float :latitude
t.float :longitude
t.references :post, foreign_key: true
t.timestamps

postテーブル

t.text :content
t.references :user, foreign_key: true

試したこと

jQueryや素のJavaScriptなどを使わず、fields_for部分をコピペして、最初からフォームが複数用意された状態にすると、すべてのフォームのデータが保存されました。

補足

postとspotで紛らわしくてすみません…
もし分かりづらい点や、不足情報があればご指摘ください

Answer 1

以前のコメントにも書きましたがcocoonを使うと簡単に実装できると思います。
https://qiita.com/hitochan/items/5a45a95e644492d66160

---

せっかくなので。。。
今後のためにも下記のような方法で「何が起こっているか」を確認するとよいかと思います。

アプローチ①　〜コードの比較〜

「最初からフォームが複数用意された状態」で、Chromeの右クリック⇒ページのソースを表示してから、https://difff.jp/に貼り付ける。
次に「jQueryで同じ数のフォームを追加したとき」のソースを上記に貼り付けて、比較してみる。

⇒これで理由がわかると思いますが・・・

---

アプローチ②　〜コードの比較〜

フォームからどのような値が送られているかデバッグしてみる。
質問からデバッグしたような記述がみられないため、もしやり方を知らなければ一度学んでおいたほうが良いかと思います。

参考：デバッグのやり方

Comments

[no1knows]

Turbolinksを利用している場合、フォームにjQueryを直接記載していると、期待通りの動きにならない可能性が考えられます。
application.jsにTurbolinksを考慮しつつ記載したほうが好ましいかと思います。

[退会済みユーザー]

cocoonの「複数のデータを同時保存」というのを誤って解釈していて、このケースでは適用できないんじゃないかと思っていましたが、改めて調べてみたところ思い通りのことができそうですね。
お手数をおかけしました。再度ご回答頂きありがとうございます。
デバッグに関しても知識がほとんどないような状態ですので、一度学んでおこうと思います。