Quill editor color controls only work the first time

Using Quill Editor, when I highlight some text, and change the color, the text-change event fires and updates my html. After I cancel-quill and reopen the window, inline style changes no longer fire the text-change event however, typing new text into the editor does. I’ve also console.log(quill) and its always created but the inline style changes only work once.

        <div class='quill-editor-container shadow' id='editor-container'>
        <div id="toolbar" class="toolbar">
            <span class="ql-formats">
                <button class="ql-bold"></button>
                <button class="ql-italic"></button>
                <button class="ql-underline"></button>
            </span>
            <span class="ql-formats">
                <button class="ql-header" value="1"></button>
                <button class="ql-header" value="2"></button>
            </span>
            <span class="ql-formats">
                <select class="ql-size"></select>
            </span>
            <span class="ql-formats">
                <select class="ql-color"></select>
                <select class="ql-background"></select>
            </span>
            <span class="ql-formats">
                <button class="ql-list" value="ordered"></button>
                <button class="ql-list" value="bullet"></button>
                <button class="ql-indent" value="-1"></button>
                <button class="ql-indent" value="+1"></button>
            </span>
            <span class="ql-formats">
                <button class="save-quill" id="save-quill"><i class="fa-solid fa-check text-success"></i> <span class="text-sm">Save</span></button>
                <button class="cancel-quill" id="cancel-quill"><i class="fa-solid fa-xmark text-danger"></i> <span class="text-sm">Cancel</span></button>
            </span>
        </div>
        <div id="editor" class="editor"></div>
    </div>

    <script>
    var quill;
    var chunk_bu = '';
    var activeChunk = '';
$(document).on('dblclick', '[data-chunk="text"]', function() {
    chunk_bu = $(this).html();
    activeChunk = $(this).attr('id');

    $('#editor').empty();

    $('#editor-container').css({
        height: '300px',
        width: '500px',
        visibility: 'visible',
        'z-index': 4
    });
    if (!quill) {
        quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: '#toolbar'
            }
        })
    }

    quill.clipboard.dangerouslyPasteHTML(chunk_bu);
    quill.on('text-change', function() {
        var chunk = document.getElementById(activeChunk)
        chunk.innerHTML = quill.root.innerHTML;
        console.log(quill.root.innerHTML)
    });
});

document.getElementById('cancel-quill').addEventListener('click', function() {
    if (quill) {
        quill.off('text-change'); // Remove event listeners
        quill = null; // Reset Quill instance
    }
    $('#editor').empty();
    $('#editor-container').css({
        height: "0px",
        width: "0px",
        visibility: 'hidden',
        'z-index': -2
    });
    activeChunk = '';
});
</script>