title: JavaScript is setting variables for partial to be appended before Rails actually sets them
body: <p>I have a form which I use to create a list. I want to give the user the ability to create new forms for new items to be saved for future list making. I want to have a "+" button to add create a new form via JavaScript. It was working great on my test user, but things were getting cluttered so I made a new user to start fresh. When I tried to load my new list page I get his with this:</p>
  
  <pre><code>undefined method `id' for nil:NilClass
  </code></pre>
  
  <p>Specifically, it's pointing to this bit in my JavaScript:</p>
  
  <pre><code>$(this).parents(':eq(1)').append("&lt;%= escape_javascript render partial: 'shared/user_item_form', locals: {f: @f, category_id: @category.id} %&gt;");
  </code></pre>
  
  <p>I need to pass these variables to any new form that's going to be rendered, but these variables rely on data that is passed from the server or database or something. It seems like it's trying to run my JavaScript first, despite me declaring <code>$(document).ready</code>.</p>
  
  <p>Here is the form in it's entirety. </p>
  
  <p>Line 26 is where this problem starts, where I declared some class variables in order for them to reach my javascript down below.</p>
  
  <p>Line 43 is where I render the first partial, the same one that will be duplicated when the user presses "+". When the user presses that button I want the same exact form to pop up underneath it.</p>
  
  <p><a href="https://pastebin.com/ieLYfYm4" rel="nofollow noreferrer">https://pastebin.com/ieLYfYm4</a></p>
  
  <p>I'm a real noob when it comes to combining JS and Rails, and I've been struggling a lot with this part of my project. I don't really understand what gets loaded first or where my JS is supposed to go. What I have hacked together seems to work fine though until now. Not sure why it was even working at any point if this now a problem. Maybe my browser stored something in the cache that was preventing this error from being raised?</p>
  
  <p>Code if you can't look at the pastbin</p>
  
  <pre><code>&lt;div class="new-list"&gt;
      &lt;h2&gt;New List&lt;/h2&gt;
      &lt;%= form_for @list, url: list_path, html: {class: "form-signin"} do |f| %&gt;
          &lt;%= f.text_field :name, placeholder: "Name your list (optional)" %&gt;
          &lt;!-- Category --&gt;
          &lt;div class="categories"&gt;
              &lt;% current_user.categories.each do |category| %&gt;
                  &lt;h3 class="category"&gt;
                    &lt;%= category.name %&gt;
                  &lt;/h3&gt;
                  &lt;!-- Items --&gt;  
                  &lt;div class="dropdown-button" data-toggle="collapse" data-target="#&lt;%= category.name %&gt;"&gt;
                      &lt;span class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;!-- Dropdown div --&gt;
                  &lt;div id="&lt;%= category.name %&gt;" class="collapse"&gt;
                      &lt;div class="table-responsive"&gt;
                          &lt;!-- User Item table --&gt;
                          &lt;table class="items"&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Add&lt;/th&gt;
                                  &lt;th&gt;Name&lt;/th&gt;
                                  &lt;th&gt;Price&lt;/th&gt;
                                  &lt;th&gt;Qnty&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;% category.user_items.each do |item| %&gt;
                              &lt;%= f.fields_for l = @list.list_items.build, index: l.id do |list_item| %&gt;
                                  &lt;% @category = category %&gt;
                                  &lt;% @f = f %&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;&lt;%= list_item.check_box :user_item_id, { checked: false }, item.id, nil %&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;%= item.name %&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;%= item.price %&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;%= list_item.number_field :quantity,
                                                                                                      min: 1,
                                                                                                      class: "num"%&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;% end %&gt;
                          &lt;% end %&gt;
                        &lt;/table&gt;
                      &lt;/div&gt;
                      &lt;h3&gt;Create a new item here:&lt;/h3&gt;
                      &lt;%= render partial: 'shared/user_item_form', locals: {f: f, category_id: category.id}  %&gt;
                      &lt;h4&gt;&lt;span class="glyphicon glyphicon-plus" id="add-item"&gt;&lt;/span&gt;Add More&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;% end %&gt; &lt;!-- current_user.categories --&gt;
              &lt;br&gt;
              &lt;%= f.submit "Submit" %&gt;
          &lt;/div&gt;
      &lt;% end %&gt;
  &lt;/div&gt;
  
  &lt;!-- dropdown button script --&gt;
  &lt;script&gt;
    $(document).ready(function () {
        $('.data-toggle').collapse();
        addNewItemForm();
    });
  
  function addNewItemForm(){
    $('#add-item').click(function(){
          $(this).parents(':eq(1)').append("&lt;%= escape_javascript render partial: 'shared/user_item_form', locals: {f: @f, category_id: @category.id} %&gt;");
    });
  }
  &lt;/script&gt;
  </code></pre>