Внедрение HTML через AJAX в рельсы

Question

Я объясняю вам проблему, у меня есть рельсы формы внутри оверлея, в которых я должен изменить часть HTML в соответствии с тем, нажимаю ли я кнопку или другую кнопку, чтобы вызвать форму. Для этого я сказал себе, что собираюсь использовать ajax с частичным файлом js, однако он не работает. Я отправляю вам все необходимые файлы. Спасибо

new.html.erb

<div class="overlay">
  <div class="container">
    <div class="row overlay-title">
      <div class="col-sm-6 clearfix">Select Products</div>
      <div class="col-sm-6 clearfix text-right">
        <button type="button" class="close overlay-close-btn"aria-label="Close">
          <span id="close-btn" aria-hidden="true">×</span>
        </button>
      </div>
    </div>
    <div class="row products-filter">
      <div class="col-sm-6 pull-left">
        <%= form_for product_associations_url, url: overlay_path, remote: true, as: :get do |f| %>
          <input name="query" type="text" id="text-field">
          <%= f.button "Search", class: "btn btn-primary", id: "button-search" %>
      </div>
      <div class="col-sm-6 pull-right product-collections">
      </div>
    </div>
    <div class="row products-selection">
      <div class="col-sm-6 pull-left">
        <div class="results-field products-column">
          <div class="results-bar pull-left clearfix">
            <div class="pull-left">Results</div>
            <div class="pull-right">
              <a class="select-all" href="#">Select All</a>
            </div>
          </div>
          <div style="clear:both"></div>
          <div class="search-results bundle-products-list">
          </div>
        </div>
      </div>
        <div class="col-sm-6 pull-right">
          <div class="results-field products-column">
            <div class="results-bar pull-left">
              <div class="pull-left">Select Products</div>
              <div class="pull-right">
                <a class="remove-all red-link" href="#">Remove all</a>
              </div>
            </div>
            <div style="clear:both"></div>
            <div class="selected-items bundle-products-list"></div>
            <div class="col-sm-12 text-center">
              <%= f.submit "Continue With Selected Products", class: 'btn btn-primary continue-button smar7-btn center-block'%>
            </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>

overlay.js.erb

console.log("hello");

const primary = document.querySelector('#trigger-btn');
const associated = document.querySelector('#bundle-btn');

choices = [ primary, associated ];

const PrimaryOrAssociated = (event) => {
  if (event.currentTarget === primary) {
    var list = document.querySelector(".search-results .bundle-products-list")
    <% @products.each do |product| %>
      list.insertAdjacentHTML("afterbegin", `<div class=search-result-img product-item-img pull-left></div>`)

    var one = document.querySelector(".search-result-img .product-item-img")
    one.insertAdjacentHTML("afterbegin", `<img class=img-thumbnail img-search alt=<%= product.title %> src=<%= product.images[0].src%>>`)
    one.insertAdjacentHTML("afterend", `<div class=search-result-options></div>`)

    var two = document.querySelector(".search-result-options")
    two.insertAdjacentHTML("afterbegin", `<h5 class=product-item-name><%= product.title %></h5>`)
    two.insertAdjacentHTML("afterend", `div class=search-result-links pull-right></div>`)

    var three = document.querySelector(".search-result-links")
    three.insertAdjacentHTML("afterbegin", `<a class=preview-link btn btn-default target=_blank href=#>Preview</a>`)
    three.insertAdjacentHTML("afterend", `<button style=display :block class=add-button btn btn-primary type=button data-uid=<%= product.id %>>Add</button>`)
    three.insertAdjacentHTML("afterend", `<button style=display :none class=remove-button btn btn-danger type=button data-uid=<%= product.id %>>Remove</button>`)

  <% end %>
  } else if (event.currentTarget === associated) {
      var list = document.querySelector(".search-results .bundle-products-list")
      <% @products.each do |product| %>
        list.insertAdjacentHTML("afterbegin", `<div class=search-result-img product-item-img pull-left></div>`)

      var one = document.querySelector(".search-result-img .product-item-img")
      one.insertAdjacentHTML("afterbegin", `<img class=img-thumbnail img-search alt=<%= product.title %> src=<%= product.images[0].src%>>`)
      one.insertAdjacentHTML("afterend", `<div class=search-result-options></div>`)

      var two = document.querySelector(".search-result-options")
      two.insertAdjacentHTML("afterbegin", `<h5 class=product-item-name><%= product.title %></h5>`)
      two.insertAdjacentHTML("afterend", `div class=search-result-links pull-right></div>`)

      var three = document.querySelector(".search-result-links")
      three.insertAdjacentHTML("afterbegin", `<a class=preview-link btn btn-default target=_blank href=#>Preview</a>`)
      three.insertAdjacentHTML("afterend", `<button style=display :block class=add-button btn btn-primary type=button data-uid=<%= product.id %>>Add</button>`)
      three.insertAdjacentHTML("afterend", `<button style=display :none class=remove-button btn btn-danger type=button data-uid=<%= product.id %>>Remove</button>`)

    <% end %>
  }
}

const toggleActiveOnClick = (choice) => {
  choice.addEventListener('click', PrimaryOrAssociated);
};

choices.forEach(toggleActiveOnClick);

product_associations.controller.rb

def new
    @products = ShopifyAPI::Product.find(:all)
  end

  def overlay
    @products = []
    @titles = Product.search_full_text(params[:query])
    @titles.each do |product|
      @products << ShopifyAPI::Product.find(product.product_id)
    end
    respond_to do |format|
      # format.html
      format.js
      format.js { render "product_associations/overlay" }
    end
  end