Jqueryで追加されたフォームの値をDBに保存する方法について

Question

前提・実現したいこと

Rails 5.2.4.1　使用しています。

railsで親子孫ひ孫モデルを一度にデータを登録する機能の実装をしています。
参考サイト　https://www.subculeng.com/?p=740

モデル（テーブル）の関係は以下です。
親 post
子 program
孫 hard
ひ孫 product

post, has_many :programs
program, belongs_to :post
has_many :hards
hard, belongs_to :program
has_many :products
product, belongs_to :hard

コントローラーの記述に、buildメソッドを使い、子孫ひ孫のインスタンスを作成しました。
ビューではfields_forを使って、表示させています。

ここからが本題です。
hardテーブルのcategoryカラムとproductテーブルのthingカラムは複数の値を保存させたいです。
jqueryを使って、hardのtext_fieldの横にボタンを設置し、追加するボタンを押したら、
とりあえずは１つの項目が追加できるようになっている状態です。
ですが追加した項目に入力した値は保存されますが、オリジナルの項目フォームには保存されません。
例えば、オリジナルに「iPad」と入力し、追加した項目に「iPhone」と入力したら、「iPhone」だけが保存されます。

今回該当する箇所のコードを抜粋します。

.best-main
  .best-main-text
    ハード
  = d.fields_for :hards, class:"hards-parent" do |m|
    = m.text_field :category, placeholder: "category", type: "text", class:"hards-input-text", id: "hard_text"
    = icon('far', 'plus-square', id: 'pulas-hard')
    #add

以下は全体のコードです。

該当のソースコード

= render 'partial/sidebar'
.main
  %span.main-child
    施設情報・納品情報を登録してください
  .main-registration__date
    .main-registration__date-child
      登録日
    = form_for @post, url: posts_path do |f|
      =f.text_field :registration_date, placeholder: "登録日", type: "text", class:"registration__date-input-text"

      .main-facility
        .main-facility-child
          施設名
        =f.text_field :facility_name, placeholder: "施設名", type: "text", class:"facility-input-text"

      .main-postal__code
        .main-postal__code-child
          郵便番号
        =f.text_field :postal_code, placeholder: "郵便番号", type: "text", class:"postal__code-input-text"

      .main-address
        .main-address-child
          住所
        =f.text_field :address, placeholder: "住所", type: "text", class:"address-input-text"

      .main-tell
        .main-tell-child
          電話番号
        =f.text_field :tell, placeholder: "電話番号", type: "text", class:"tell-input-text"

      .main-delivery_date
        .main-delivery_date-child
          納品日
        =f.text_field :delivery_date, placeholder: "納品日", type: "text", class:"delivery_date-input-text"

      .main-delivery_note
        .main-delivery_note-child
          納品書
        = f.file_field :delivery_note, class: "delivery_note-image"

      .main-estimate_sheet
        .main-estimate_sheet-child
          見積書
        = f.file_field :estimate_sheet, class: "estimate_sheet-image"

      .footer

      .best
        %span.best-name
          納品/ソフトウェアを登録してください
        .best-software
          .best-software-child
            ソフト
          = f.fields_for :programs do |d|
            = d.text_field :software, placeholder: "name", type: "text", class:"software-input-text"

            .best-main
              .best-main-text
                ハード
              = d.fields_for :hards, class:"hards-parent" do |m|
                = m.text_field :category, placeholder: "category", type: "text", class:"hards-input-text", id: "hard_text"
                = icon('far', 'plus-square', id: 'pulas-hard')
                #add

                .products
                  .products-text
                    プロダクト
                  = m.fields_for :products do |s|
                    = s.text_field :thing, placeholder: "products", type: "text", class:"products-input-text"
                    = icon('far', 'plus-square', id: 'pulas-product')

                .footer
                  = f.submit "send", class:"products_button"

$(function(){

  function buildHTML(){
    let html = `<input placeholder="category" type="text" class="hards-input-text" id="hard_text" name="post[programs_attributes][0][hards_attributes][0][category]">`

    return html;
  }

  $("#pulas-hard").click(function(e){
    e.preventDefault();

    let html = buildHTML();
    let type_text = document.getElementById("hard_text").getAttribute("type");

    $("#add").addClass("add_text");
    $(".add_text").append(html);
    $(".add_text").attr(type_text);

  });
});

def  new
    @post = Post.new
    programs = @post.programs.build
    hards = programs.hards.build
    products = hards.products.build
  end

  def  create
    @post = Post.new(post_params)
    @post.save
  end

private

    def post_params
      params.require(:post).permit(:facility_name, :address, :tell, :registration_date, :estimate_sheet, :delivery_date, :delivery_note, :postal_code, :user_id, programs_attributes:[:software, :user, :post_id, hards_attributes:[:category, :program_id, :_destroy, products_attributes:[:thing, :user_id, :hard_id]]]).merge(user_id: current_user.id)
    end

試したこと

getElementByIdで要素を取得してしまったからオリジナルのフォームの値は保存されないのかと思い、
オリジナルのクローンを作る、書き方に変更して試してみました。
ですが、今度はオリジナルは保存できて、追加した項目の値が保存されないようになりました。

$(document).on("click", "#pulas-hard", function() {

  $("#hard_text").clone(true).insertAfter("#hard_text");
});

最終的にどうしたいか、具体的に

hardテーブルの直近の親はprogramテーブルで、hardテーブルには外部キーでprogram_idが入るようにしています。
hardテーブルのcategoryカラムは一度に複数登録してもそれらには、同じprogram_idが入るようにして紐づけしたいです。

Answer 1

= m.text_field :category, placeholder: "category", type: "text", class:"hards-input-text", id: "hard_text"
この一文に含まれる、name[0]のカウントを増やすことによって値を保存する事が可能になりました。