How to show toastr on dynamically inserted buttonID

I was getting error on HTML page on load: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') Error caused by absence of button#deleteDroppedFormItemToastTriggerButton

My button added on click on list item: <code>// Function to insert buttons HTML into li.dropped-element function insertDroppedElementButtons(element) { if (element) { var buttonsHTML = <div class="dropped-element-buttons"> <button type="button" class="btn btn-icon btn-circle btn-sm btn-secondary shadow draggable-handle"> <i class="las la-bars fs-4"></i> </button> <button type="button" class="btn btn-icon btn-circle btn-sm btn-primary shadow btn-properties"> <i class="las la-tools fs-4"></i> </button> <button type="button" id="deleteDroppedFormItemToastTriggerButton" class="btn btn-icon btn-sm btn-danger btn-circle shadow btn-delete-item"> <i class="las la-trash fs-4"></i> </button> </div>; element.insertAdjacentHTML('beforeend', buttonsHTML); } } // Function to remove buttons HTML from li.dropped-element function removeDroppedElementButtons(element) { if (element) { var buttonsContainer = element.querySelector('.dropped-element-buttons'); if (buttonsContainer) { buttonsContainer.remove(); } } }</code>

HTML: <code><!-- begin::move to folder toast --> <div id="formItemDeletedToastContainer" class="toast-container position-fixed top-0 end-0 p-3" > <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-kt-docs-toast="stack"> <div class="toast-header"> <i class="las la-folder-open fs-2 text-success me-3"></i> <strong class="me-auto">Form klasöre taşındı!</strong> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> "Item name" Lorem ipsum dolor sit amet klasörüne taşındı. </div> </div> </div> <!-- end::move to folder toast --></code>

This js code did not hepl :( <code> const formElementRemoved = document.getElementById('deleteDroppedFormItemToastTriggerButton');

    // Check if the element exists before proceeding
    if (formElementRemoved) {
        const formElementRemovedContainer = document.getElementById('formItemDeletedToastContainer');
        const formElementRemovedTarget = document.querySelector('[data-kt-docs-toast="stack"]');

        formElementRemovedTarget.parentNode.removeChild(formElementRemovedTarget);

        // Handle button click
        formElementRemoved.addEventListener('click', e => {
            e.preventDefault();

            // Create new toast element
            const newToast = formElementRemovedTarget.cloneNode(true);
            formElementRemovedContainer.append(newToast);

            // Create new toast instance 
            // more info: https://getbootstrap.com/docs/5.1/components/toasts/#getorcreateinstance
            const toast = bootstrap.Toast.getOrCreateInstance(newToast);
            

            // Toggle toast to show 
            //more info: https://getbootstrap.com/docs/5.1/components/toasts/#show
            toast.show();
        });
    }

I need some help, please and thank you!