title: Multiple Summernote text area fields
body: <p>I have two Rails forms (edit and new) that have multiple text areas. I'm trying to get all of them to use Summernote, but only one of them appears to use the javascript (the last text area if that makes a difference). How can I change it so all text areas use Summernote?</p>
  
  <p>Here's the relevant code:</p>
  
  <p>coffee javascript file:</p>
  
  <pre><code>$ -&gt;
  
    # to set summernote object
    # You should change '#med_description' to your textarea input id
    summer_note = $('#med_description')
    summer_note2 = $('#med_reactions')
    summer_note3 = $('#med_interactions')
    summer_note4 = $('#med_implementation')
    summer_note5 = $('#med_availability')
    summer_note6 = $('#med_caution')
    summer_note7 = $('#med_warnings')
  
    # to call summernote editor
    summer_note.summernote
    summer_note2.summernote
    summer_note3.summernote
    summer_note4.summernote
    summer_note5.summernote
    summer_note6.summernote
    summer_note7.summernote
      # to set options
      height:300
      codemirror:
        lineNumbers: true
        tabSize: 2
        theme: "solarized light"
  
    # to set code for summernote
    summer_note.code summer_note.val()
    summer_note2.code summer_note.val()
    summer_note3.code summer_note.val()
    summer_note4.code summer_note.val()
    summer_note5.code summer_note.val()
    summer_note6.code summer_note.val()
    summer_note7.code summer_note.val()
  
    # to get code for summernote
    summer_note.closest('form').submit -&gt;
      # alert $('#med_description').code()
      summer_note.val summer_note.code()
      true
  
    # to get code for summernote
    summer_note2.closest('form').submit -&gt;
      # alert $('#med_reactions').code()
      summer_note.val summer_note.code()
      true
  
    # to get code for summernote
    summer_note3.closest('form').submit -&gt;
      # alert $('#med_interactions').code()
      summer_note.val summer_note.code()
      true
  
    # to get code for summernote
    summer_note4.closest('form').submit -&gt;
      # alert $('#med_implementation').code()
      summer_note.val summer_note.code()
      true  
  
    # to get code for summernote
    summer_note5.closest('form').submit -&gt;
      # alert $('#med_availability').code()
      summer_note.val summer_note.code()
      true  
  
    # to get code for summernote
    summer_note6.closest('form').submit -&gt;
      # alert $('#med_caution').code()
      summer_note.val summer_note.code()
      true
  
    # to get code for summernote
    summer_note7.closest('form').submit -&gt;
      # alert $('#med_warnings').code()
      summer_note.val summer_note.code()
      true
  </code></pre>
  
  <p>edit.html.erb:</p>
  
  <pre><code>&lt;%= form_for(@med) do |f| %&gt;
        &lt;%= f.label :brand_name, "Name of the medicine:" %&gt;
        &lt;div&gt;&lt;%= f.text_field :brand_name, required: true %&gt;&lt;/div&gt;
  
        &lt;%= f.label :generic_name %&gt;
        &lt;div&gt;&lt;%= f.text_field :generic_name, required: true %&gt;&lt;/div&gt;
  
         &lt;%= f.label :description %&gt;
        &lt;div&gt;&lt;%= f.text_area :description, as: :summernote, :id =&gt; 'description' %&gt;&lt;/div&gt;
  
        &lt;%= f.label :reactions %&gt;
        &lt;div&gt;&lt;%= f.text_area :reactions, as: :summernote, :id =&gt; 'reactions' %&gt;&lt;/div&gt;
  
        &lt;%= f.label :interactions %&gt;
        &lt;div&gt;&lt;%= f.text_area :interactions, as: :summernote, :id =&gt; 'interactions' %&gt;&lt;/div&gt;
  
        &lt;%= f.label :implementation %&gt;
        &lt;div&gt;&lt;%= f.text_area :implementation, as: :summernote, :id =&gt; 'implementation' %&gt;&lt;/div&gt;
  
        &lt;%= f.label :availability %&gt;
        &lt;div&gt;&lt;%= f.text_area :availability, as: :summernote, :id =&gt; 'availability' %&gt;&lt;/div&gt;
  
        &lt;%= f.label :caution %&gt;
        &lt;div&gt;&lt;%= f.text_area :caution, as: :summernote, :id =&gt; 'caution' %&gt;&lt;/div&gt;
  
        &lt;%= f.label :warnings %&gt;
        &lt;div&gt;&lt;%= f.text_area :warnings, as: :summernote, :id =&gt; 'warnings' %&gt;&lt;/div&gt;
  
  &lt;div&gt;&lt;%= f.submit "Save changes", class: "btn btn-primary" %&gt; &lt;/div&gt;
   &lt;% end %&gt;
  </code></pre>
  
  <p>new.html.erb:</p>
  
  <pre><code> &lt;%= simple_form_for @med, class: "form-horizontal", method: :post do |f| %&gt;
                                &lt;div class="form-group"&gt;
                                      &lt;%= f.label :brand_name, "Name of the medicine:" %&gt;
                                      &lt;%= f.input :brand_name, required: true %&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                &lt;%= f.label :generic_name %&gt;
                                &lt;%= f.input :generic_name, required: true  %&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                      &lt;%= f.label :description %&gt;
                                      &lt;%= f.input :description, as: :summernote, :id =&gt; 'description' %&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                      &lt;%= f.label :reactions %&gt;
                                      &lt;%= f.input :reactions, as: :summernote, id: 'reactions' %&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                   &lt;%= f.label :interactions %&gt;
                                      &lt;%= f.input :interactions, as: :summernote, id: 'interactions' %&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                      &lt;%= f.label :implementation %&gt;
                                      &lt;%= f.input :implementation, as: :summernote, id: 'implementation' %&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                      &lt;%= f.label :availability %&gt;
                                      &lt;%= f.input :availability, as: :summernote, id: 'availability' %&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                      &lt;%= f.label :caution %&gt;
                                      &lt;%= f.input :caution, as: :summernote, id: 'caution' %&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                      &lt;%= f.label :warnings %&gt;
                                      &lt;%= f.input :warnings, as: :summernote, id: 'warnings' %&gt;
                                &lt;/div&gt;
                          &lt;%= f.button :submit, class: "btn btn-primary" %&gt;
                           &lt;% end %&gt;
  </code></pre>
  
  <p>Thanks!</p>
  
  <p>EDIT: The Summernote github page (<a href="https://github.com/summernote/summernote-rails" rel="nofollow">https://github.com/summernote/summernote-rails</a>) shows the following code. I think it might be the best way to fix my issue. It looks like it loops through any field that has <code>as: :summernote</code>:</p>
  
  <pre><code>$ -&gt;
    $('[data-provider="summernote"]').each -&gt;
      $(this).summernote()
  </code></pre>
  
  <p>Is this the right answer? If so, how do I implement it?</p>