Integrating quilljs with livewire

tldr; No question, Solution for combining quilljs with livewire. No tutorial or package worked.

I have a programatically created form, which gets its data from a predefined, but editable dataset. The livewire-model is not defined, and can change over time so needs to be programmatically assigned. I wanted to use quilljs for textarea types, but that turned out to be quite a challenge. I have tried to use 2 different quilljs-livewire integration packages which are individual-component-foreach-instance-based which gave me all kinds of errors. I've also tried to make my own custom component, but didnt work because quill doesnt have a straightforward way for using $(this). Instead you have to find your elements.

Eventually I tried looping without individual components for each instance. That worked alhamdulillah.

In the view I create the necessary input types as follows:

@case('simple_textarea')

    <div class="w-full" wire:ignore>
        
        <div class="flex items-center simple-textarea-toolbar" aria-orientation="horizontal"></div>

        <div class="simple-textarea"
        data-key="data.{{$section['section']}}.{{$field['name']}}"
        id="{{$field['name']}}"
        >{!! $data[$section['section']][$field['name']] ?? '' !!}</div>
    
    </div>

@break

css, JS on the bottom of the blade view:

@section('styles')
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
@endsection

<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<script>
    
    const elements = document.querySelectorAll('.simple-textarea');

    var toolbarOptions = ['bold', 'italic', 'underline', 'strike', {'list': 'ordered'}, {'list': 'bullet'}, {container: '.simple-textarea-toolbar'}];
    elements.forEach( el => {
        
        var quill = new Quill("#"+el.id, {
            modules: {
                syntax: false,
                toolbar: toolbarOptions
            },
            theme: 'snow'
        });

        quill.on('text-change', function () {

            var model = quill.container.dataset.key;
            console.log(model)

            var val = quill.container.getElementsByClassName('ql-editor')[0].innerHTML;
            console.log(val);

            @this.set(model, val);

        });


    });

</script>