I am trying to get the code of a specific summer note div with multiple ones on a single page. 

My summer notes are created from a database with php as follows: 

```
<div class="tab-content">
  <?php $i=-1; foreach($contents as $content): ?>
      <?php $i++; ?>
      <div class="tab-pane" id="<?php echo $content->contentName; ?>">
          <div class="summernote" data-id="<?php echo $i; ?>">
              <?php echo $content->content; ?>
          </div>
      </div>
  <?php endforeach; ?>
</div>

```

And then my javascript is: 

```
<script>
  $('.summernote').summernote({
    onblur: function(e) {
      var id = $('.summernote').data('id');
      var sHTML = $('.summernote').eq(id).code();
      alert(sHTML);
    }
  });
</script>

```

It always gets the first `$('.summernote').eq(0).code();` summernote code never the second or third one. 

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. 

(btw) I am initilizing the summer notes like this: 

```
<script>
  $(document).ready(function() {
    $('.summernote').summernote({
      height: 300,
    });
  });
</script>

```
['https://Stackoverflow.com/questions/22619110', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3367639/']
After selecting all summernote's you need to access their attributes by specifying one element like:

```
<script>
  $('.summernote').each(function(i, obj) { $(obj).summernote({
    onblur: function(e) {
      var id = $(obj).data('id');
      var sHTML = $(obj).code();
      alert(sHTML);
    }
  });
});
</script>

```
I Finally got the code working for multiple summernote editors and image uploading!

To fix 

> 
> "undefined"
> 
> 
> 

, try:

> 
> var id = $(obj).data('id');
> 
> 
> 

to

> 
> var id= $(obj).attr('id'))
> 
> 
> 

Source:

<https://github.com/neblina-software/balerocms-enterprise/blob/master/src/main/resources/static/js/app.js>

Regards!