Adding erb form code without page reload

I'm searching for a solution to extent my form without page reload. First I tried to render a partial with coffee or javascript, but escape_javascript didnt work.

Here's the view

<%= form_for @recipe = current_user.recipes.build do |f| %>
  <%= f.label :name, "Recipe Name" %>
  <%= f.text_field :name %>
  <%= link_to "Add Ingredient", '#', class: "btn btn-lg btn-primary", id: "add" %>  
  <p></p>
  <%= f.submit class: "btn" %>
<% end %>

The form above should be extented with following partial by every click on the button

  <div id="recipe-ingredients">Quantity
    <%= f.fields_for :quantities, @recipe.quantities.build do |quantity| %>
      <%= render 'quantity_fields', f: quantity %>
    <% end %>
  </div>

_quantity_fields

<%= f.label :amount, "Amount:" %>
<%= f.text_field :amount %>
<%= f.collection_select(:ingredient_id, Ingredient.all, :id, :name) %>

This approach did not work (recipes.js.erb)

$(document).ready(function() {
$("#add").click(function()
  {
    $("p").append("<%= escape_javascript 
        render(:partial => 'quantities') %>");
  });
});

There's a workaround (see below) but I'm searching for a better solution.

$(document).ready(function() {
  $("#workout-week").append(<%= escape_javascript(
    Haml::Engine.new(File.read(File.join(Rails.root,'app/views',
    '_show_period.html.haml'))).render(Object.new, period: @period)) %>);
});