JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/summernote/0.6.4/summernote.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.6.4/summernote.min.js"></script>
  <button id='resetBtn' class='btn btn-danger'>Reset</button><br/><br>
  <textarea class='summernote' id='summernote' rows='10'></textarea>

JavaScript

$(document).ready(function() {
    var editor = $('#summernote');
    editor.summernote({
        height: ($(window).height() - 250),
        focus: false,
        toolbar: [
				['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough']],
                ['fontsize', ['fontsize']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['view', ['fullscreen', 'codeview']],
			],
        oninit: function() {
            // Add "open" - "save" buttons
            var noteBtn = '<button id="makeSnote" type="button" class="btn btn-default btn-sm btn-small" title="Identify a music note" data-event="something" tabindex="-1"><i class="fa fa-music"></i></button>';            
            var fileGroup = '<div class="note-file btn-group">' + noteBtn + '</div>';
            $(fileGroup).appendTo($('.note-toolbar'));
            // Button tooltips
            $('#makeSnote').tooltip({container: 'body', placement: 'bottom'});
            // Button events
            $('#makeSnote').click(function(event) {
                var highlight = window.getSelection(),  
                spn = '<span class="snote" style="color:blue;">' + highlight + '</span>',
                text = $('.note-editable').children('p').text(),
                range = highlight.getRangeAt(0),
                startText = text.substring(0, range.startOffset), 
                endText = text.substring(range.endOffset, text.length);

                $('.note-editable').html(startText + spn + endText);
            });
         },
        
    });
  
  var para = "<p>I am trying to make it</p><p>such that when a user</p><p>highlights any character or</p><p>word within this textbox (using their cursor)</p><p>and then clicks the music note button</p><p>in the toolbar, that a function</p>will:</p><p><ol><li>Wrap that highlighted text in a 'span' tag with a class of 'snote'</li><li>All of the formatting in this textbox will...