title: Multiple Summer note divs on one page
body: <p>I am trying to get the code of a specific summer note div with multiple ones on a single page. </p>
  
  <p>My summer notes are created from a database with php as follows: </p>
  
  <pre><code>&lt;div class="tab-content"&gt;
    &lt;?php $i=-1; foreach($contents as $content): ?&gt;
        &lt;?php $i++; ?&gt;
        &lt;div class="tab-pane" id="&lt;?php echo $content-&gt;contentName; ?&gt;"&gt;
            &lt;div class="summernote" data-id="&lt;?php echo $i; ?&gt;"&gt;
                &lt;?php echo $content-&gt;content; ?&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;?php endforeach; ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And then my javascript is: </p>
  
  <pre><code>&lt;script&gt;
    $('.summernote').summernote({
      onblur: function(e) {
        var id = $('.summernote').data('id');
        var sHTML = $('.summernote').eq(id).code();
        alert(sHTML);
      }
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>It always gets the first <code>$('.summernote').eq(0).code();</code> summernote code never the second or third one. </p>
  
  <p>What I'm trying to do is when each summernote gets a blur, have that code update in a hidden textarea to submit back to the database. </p>
  
  <p>(btw) I am initilizing the summer notes like this: </p>
  
  <pre><code>&lt;script&gt;
    $(document).ready(function() {
      $('.summernote').summernote({
        height: 300,
      });
    });
  &lt;/script&gt;
  </code></pre>