Getting Selected Content in Summernote

I'm using the Summernote rich text editor in a page. I am trying do some customizations on selected text within the editor. I can successfully apply my customizations on the first item I select. However, it fails on subsequent items. I have created a Fiddle, which is available here.

The steps to reproduce my problem are:

1. Enter "This is the first tag."
2. Double-click on the word "first".
3. With the word "first" selected, click the "ENGAGE" button in the toolbar.
4. Notice that the word "first" is highlighted with yellow. This is the behavior I expect.
5. Now, enter "This is the second tag." after the existing text in the rich text editor.
6. Double click on the word "second".
7. With the word "second" selected, click the "ENGAGE" button in the toolbar.
8. Notice that the text in the rich text editor gets all messed up.

I was expecting the word "second" to get highlighted as well and have my custom HTML attribute applied as occurred when I did it the first time. Once again, the Fiddle is here and the relevant code looks like this:

var myEditor = $('#myEditor');
$(myEditor).summernote({
  height:200,
  toolbar: [
    ['style', ['bold', 'italic', 'underline', 'clear']],
  ],    
  callbacks: {
    onInit: function() {
      var customButton = '<div class="note-file btn-group">' +
      '<button id="myButton" type="button" class="btn btn-default btn-sm btn-small" title="My Trigger" tabindex="-1">engage</button>' +
      '</div>';
      $(customButton).appendTo($('.note-toolbar'));  

      $('#myButton').click(function(event) {
        var editor = $('#myEditor');
        if (editor.summernote('isEmpty') === false) {
          var r = editor.summernote('createRange');
          var c = editor.summernote('code');

          var s1 = c.substring(0, r.so);
          var s2 = '<span style="background-color:yellow;" data-tag-index="' + tags.length +'">' + r.toString() + '</span>';
          tags.push(r.toString());
          var s3 = c.substring(r.eo);                        

          var modified = s1 + s2 + s3;
          $('#myEditor').summernote('code', modified);                    

          $('#results').val(modified);
        }
      });
    }
  }      
});  

Why doesn't this work? What am I doing wrong?