javascript - Multiple Summer note divs on one page -

i trying code of specific summer note div multiple ones on single page.

my summer notes created database php follows:

<div class="tab-content">   <?php $i=-1; foreach($contents $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 javascript is:

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

it gets first $('.summernote').eq(0).code(); summernote code never second or third one.

what i'm trying when each summernote gets blur, have code update in hidden textarea submit database.

(btw) initilizing summer notes this:

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

after selecting summernote's need access attributes specifying 1 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>