nhance/app/Views/ticket_auto_query.php

<style>
    .select2-selection__choice {
        background-color: #0a8794 !important;
        color: white !important;
        font-weight: bold;
    }

    .select2-selection__choice__remove {
        color: white !important;
        margin-right: 5px;
    }
</style>
<div class="row">
    <div class="col-12">
        <div class="card-body">
            <form role="form" class="parsley-examples" method="post" id="ticket_auto_query"
                enctype="multipart/form-data">
                <div class="form-group">
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <!-- <label for="ticket_auto_query_note">Add Notes</label> -->
                            <div class="form-row" id="rac_rate_dropdown">
                                <div class="form-group col-md-9">
                                    <label>Documents</label> <br />
                                    <select class="form-control" name="documents[]" id="ticket_mail_auto_query_customButton" multiple>
                                        <?php foreach ($ticket_check_list as $value): ?>
                                            <option value="<?= $value['document']; ?>"
                                                <?php  //
                                                //    if (!isset($getData) || (isset($getData['documents']) && in_array($value['document'], $getData['documents']))) {
                                                //         echo 'selected';
                                                //     }
                                                ?>>
                                                <?= $value['document']; ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>

                                <div style="padding-top:30px;padding-left:20px;" class="col-md-3">
                                    <button type="button" class="btn btn-primary" id="insertSelectedDocumnets">Insert Documents</button>
                                </div>


                            </div>
                            <textarea class="form-control" id="ticket_auto_query_note" name="note" rows="3"
                                placeholder="Enter Text"></textarea>
                        </div>
                    </div>
                </div><input type="hidden" id="query_note_id">

                <div class="form-group text-right">
                    <button type="submit" class="btn btn-primary" id="ticket_auto_query_submit">Submit</button>
                </div>
            </form>
        </div>
    </div> <!-- end col-->
</div>
<!-- end -->

<script>
    
    $(document).ready(function() {

        // $('#ticket_mail_auto_query_customButton').select2();
        $('#ticket_mail_auto_query_customButton').select2({
            placeholder: "Select Documents",
            allowClear: true,
            closeOnSelect: false, // This is the key option to keep the dropdown open
            tags: true
        });

        $("textarea.select2-search__field").attr('rows', '1');
        $("textarea.select2-search__field").css('resize', 'none');

        const auto_query_editor = Jodit.make("#ticket_auto_query_note", editorConfig);
        let lastActiveField = null;

        auto_query_editor.events.on("focus", function() {
            lastActiveField = auto_query_editor;
        });

        $("#insertSelectedDocumnets").on("click", function() {
            // Get all selected documents
            const selectedDocuments = $("#ticket_mail_auto_query_customButton").val();

            if (!selectedDocuments || selectedDocuments.length === 0) {
                toastr.warning('Please select documents first', 'Warning');
                return;
            }

            if (lastActiveField === auto_query_editor) {
                // Insert each document on a new line
                selectedDocuments.forEach(document => {
                    auto_query_editor.selection.insertHTML(document + '<br>');
                });

                // Clear the selection
                $("#ticket_mail_auto_query_customButton").val(null).trigger('change');
            } else {
                toastr.warning('Please focus on the text area first', 'Warning');
            }
        });

        // --------------------------------------------------------------------------------------------------------------

        url = '<?= base_url('ticket/note/1') ?>';
        data = {
            id: $('#ticket_master_id').val(),
            is_auto_query: 1
        };
        $.ajax({
            url: url,
            data: data,
            type: 'POST',
            success: function(res) {
                console.log('auto query res', res)
                if (res.status == true) {

                    $('#ticket_auto_query_note').val(res.data.note);
                    if (auto_query_editor) {
                        auto_query_editor.value = res.data.note;
                    }
                    $('#query_note_id').val(res.data.id);
                }
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
                console.error(status, error);
                setTimeout(function() {
                    $('.loader').fadeOut();
                    $('.loader-mask').delay(350).fadeOut('slow');
                    toastr.warning('Something Went Wrong!', 'warning');
                }, 1000);
            }
        })

        $("#ticket_auto_query").submit(function(event) {

            event.preventDefault();
            $('.loader').fadeIn();
            $('.loader-mask').fadeIn();

            var url = '<?= base_url("/ticket/note/2"); ?>';
            var formData = $(this).serializeArray();
            var ticket_id = $('#ticket_master_id').val();
            if (ticket_id != null && ticket_id != '') {
                formData.push({
                    name: 'ticket_id',
                    value: ticket_id
                });
            }
            var primary_key = $('#query_note_id').val();
            if (primary_key != null && primary_key != '') {
                formData.push({
                    name: 'id',
                    value: primary_key
                });
            }
            formData.push({
                name: 'is_auto_query',
                value: 1
            })
            console.log(formData);
            sendAjaxRequestForGlobal(url, 'POST', formData, function(response) {

                if (response.status == true) {
                    
                    $('.loader').fadeOut();
                    $('.loader-mask').delay(350).fadeOut('slow');
                    toastr.success('Note Added Successfully', 'Success');
                    // console.log("Respone id is ")
                    // console.log(response.id);    
                    $('#query_note_id').val(response.id);
                } else {

                    $('.loader').fadeOut();
                    $('.loader-mask').delay(350).fadeOut('slow');
                    let message = response.message;
                    toastr.error(message, 'ERROR');
                }

                window.location.reload();

            }, function(xhr, status, error) {
                console.error('Error fetching data:', error);
                console.error(xhr.responseText);
                toastr.error('An error occurred while fetching the report page.', 'ERROR');

                $('.loader').fadeOut();
                $('.loader-mask').delay(350).fadeOut('slow');
            });
        });

    });
</script>