JSFiddle - React, Tailwind, and code Playground

HTML

<button id="jQueryEvent">jQuery Event</button>
<button id="customEvent">Custom Event</button>

<textarea></textarea>

JavaScript

$(document).on('my-custom-event', function (e, custom_id) {
    console.log('the ID is: ' + custom_id);
});

$('#jQueryEvent').click(function () {
    $(document).trigger('my-custom-event', '12345');
});

$('#customEvent').click(function () {
    // create event
    var event = new CustomEvent('my-custom-event-2', {
        detail: '12345'
    });

    // dispatch event
    document.dispatchEvent(event);
});

var t = document.queryselector('textarea');

document.addEventListener('my-custom-event-2', function (e) {
    console.log('the ID is: ' + e.detail);
    
});