JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.quilljs.com/1.0.0-beta.3/quill.js"></script>
<link rel="stylesheet" href="https://cdn.quilljs.com/1.0.0-beta.3/quill.snow.css">
<!-- Create the editor container -->
<div id="toolbar-container">
    <span class="ql-formats">
      <select class="customH1">HR</select><!-- works only with select -->
      <select class="ql-hr">H1</select><!-- works only with select -->
    </span>
     
    <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </span>
  </div>
<div id="editor">

  <p>Select me and click on the first icon in the toolbar</p>
  <p>first icon is H1 and the second is hr</p>
  <h2> hello</h2>
   <hr> <!-- gets replaced by p-tag -->
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0-beta.3/quill.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

JavaScript

/*global Quill*/
var quill = new Quill('#editor', {
    modules: {
      toolbar: '#toolbar-container'
    },
    placeholder: 'Compose an epic...',
    theme: 'snow'
  });
  
  
  /*global $*/ // works!
  $('.customH1').on("click",function(){
   var range = quill.getSelection();      
    var text = quill.getText(range.index, range.length);
                quill.deleteText(range.index, range.length);
      quill.pasteHTML(range.index, '<h2>'+text+'</h2>');
  })


  /*global $*/      // doesn't work!
  $('.ql-hr').on("click",function(){
    var range = quill.getSelection();
      quill.pasteHTML(range.index, '<hr>');
  })