やりたいこと

Ruby on Railsを使ってWebアプリケーションを作成しています。
nested_form_fieldsというgemを使って、動的に画像アップロードフォームを含めた入力フォームを動的に追加できる機能を実装しており、この追加された画像アップロードフォームのそれぞれに対して画像プレビュー機能をつけたいと考えています。

イメージ画像

// _form.html.slim
= f.nested_fields_for :gears, wrapper_tag: :div do |g|
  .item
    .row
      .col-6
        .form-group
          = g.label :gear_image
          - if g.object.gear_image?
            = image_tag(g.object.gear_image.url, id: 'preview__nested_field_for_replace_with_index__', class: 'gear_image')
          - else
            = image_tag('nofile.jpg', id: 'preview__nested_field_for_replace_with_index__', class: 'gear_image')
          = g.file_field :gear_image, class: "form-control-file gear-file-form"
      .col-6
        .form-group
          = g.label :name
          = g.text_field :name, class: "form-control"
        .form-group
          = g.label :brand
          = g.text_field :brand, class: "form-control"
        .form-group
          = g.label :kind
          = g.select :kind, gear_type_list, { include_blank: true }, class: "form-control"
        .form-group
          = g.label :model_year
          = g.text_field :model_year, class: "form-control"
        = g.remove_nested_fields_link '削除', class: 'btn btn-danger', role: 'button'
= f.add_nested_fields_link :gears, '＋', class: 'btn btn-primary', role: 'button', id: 'add-form'

// application.js
document.addEventListener('DOMContentLoaded', function () {
  var index = 1;
  var fuga = '#preview';

  document.getElementById('add-form').addEventListener("click", function () {
    index += 1;
    // とりあえず以下２通り試しましたがフォーム作成前に実行されてしまいます。
    hogehoge(index);  // 1
    window.onload = hogehoge(index); // 2
  }, false);

  // 関数①
  function hogehoge(index) {
    for (var i = 0; i < index; i++) {
      (function (j) {
        fuga += j.toFixed();
        var id = 'article_gears_attributes_' + j + '_gear_image';
        document.getElementById(id).addEventListener("change", function (evt) {
          var file = evt.target.files;
          var reader = new FileReader();
          reader.readAsDataURL(file[0]);
          reader.onload = function () {
            document.querySelector(fuga).src = reader.result;
          }
        }, false);
      }(i));
    }
  };
  window.onload = hogehoge(index);
});

問題点

JavaScriptで

1. フォームの数だけ画像アップロードフォームにイベントを追加する関数hogehogeを定義・・・①
2. ページ読み込み時に①を実行
3. フォームの追加ボタン（画像では＋ボタン）を押下した時に①の関数hogehogeを再実行

という流れを思い浮かべていたのですが、3.でフォームがnested_form_fieldsによって追加される前に
①の関数hogehogeが実行されてしまい、Uncaught TypeError: Cannot read property 'addEventListener' of nullを吐いてしまいます。

フォームが追加された後に関数hogehogeを実行させるようにしたいのですが、なにか良いやり方はないでしょうか？