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:
// 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();
}
}
}

HTML:
<!-- 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ı!
<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 -->

This js code did not hepl

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!