nhance/app/Views/ticket_auto_query.php

<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-12">
                                    <select id="ticket_mail_auto_query_customButton" class="form-control"
                                        style="border:none;right: 13px;width: auto;position: absolute;z-index: 1;top: -19px;height: 32px;float: right;">
                                        <option value="">Documents</option>
                                        <?php foreach ($ticket_check_list as $value): ?>
                                            <option value="<?= $value['document']; ?>"><?= $value['document']; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            <textarea class="form-control" id="ticket_auto_query_note" name="note" rows="3"
                                placeholder="Enter Text"><?= isset($ticket_note['note']) ? $ticket_note['note'] : '' ?></textarea>
                        </div>
                    </div>
                </div><input type="hidden" id="query_note_id"><input type="hidden" <div
                    class="form-group text-right m-b-0">
                <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() {
    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) {
            if (res.status == true) {
                $('#ticket_auto_query_note').val(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');
            }


        }, 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');
        });
    });

});

let lastActiveField = null;

$("#ticket_auto_query_note").on("focus", function() {
    lastActiveField = this;
});

document.addEventListener('change', function(event) {

    var target = event.target;

    if (target.matches('#ticket_mail_auto_query_customButton')) {

        let placeholderValue = $(target).val();
        if (!placeholderValue) return;

        if (lastActiveField) {
            if (lastActiveField.id === "ticket_auto_query_note") {
                insertAtCursor(lastActiveField, placeholderValue);
            } 
        }

        $(target).val('');
    }
});

function insertAtCursor(input, textToInsert) {

    textToInsert += '\n';

    if (document.selection) {
        input.focus();
        var sel = document.selection.createRange();
        sel.text = textToInsert;
    } else if (input.selectionStart || input.selectionStart === 0) {
        let startPos = input.selectionStart;
        let endPos = input.selectionEnd;
        input.value = input.value.substring(0, startPos) + textToInsert + input.value.substring(endPos, input.value
            .length);
        input.selectionStart = input.selectionEnd = startPos + textToInsert.length;
    } else {
        input.value += textToInsert;
    }
}
</script>