Untitled

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Function to create and append the button to the body
    function createButton() {
        // Check if the button already exists
        if (document.getElementById('button_64')) {
            console.log('Button already exists.');
            return;
        }

        // Create button HTML
        var buttonHTML = `
            <button id="button_64" class="btn btn-primary">Open Modal</button>
        `;

        // Append button HTML to the body
        document.body.insertAdjacentHTML('beforeend', buttonHTML);
        console.log('Button HTML appended to body.');
    }

    // Function to create and append the modal HTML
    function createModal() {
        // Check if the modal already exists
        if (document.getElementById('dynamicModal')) {
            console.log('Modal already exists.');
            return;
        }

        // Create modal HTML
        var modalHTML = `
            <div id="dynamicModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalLabel">Modal Title</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <!-- Content from hidden div will be cloned here -->
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        `;

        // Append modal HTML to the body
        document.body.insertAdjacentHTML('beforeend', modalHTML);
        console.log('Modal HTML appended to body.');

        // Populate the modal with content from the hidden div
        populateModal();
    }

    // Function to populate the modal with content from the hidden div
    function populateModal() {
        var hiddenDiv = document.getElementById('hiddenDiv');
        var modalBody = document.querySelector('#dynamicModal .modal-body');

        if (hiddenDiv && modalBody) {
            // Clone content from hidden div
            modalBody.innerHTML = hiddenDiv.innerHTML;
            console.log('Modal populated with hidden div content.');
        } else {
            console.log('Hidden div or modal body not found.');
        }
    }

    // Function to show the modal
    function showModal() {
        var modalElement = document.getElementById('dynamicModal');
        if (modalElement) {
            var modal = new bootstrap.Modal(modalElement);
            modal.show();
            console.log('Modal is now visible.');
        }
    }

    // Create and append the button and modal on page load
    createButton();
    createModal();

    // Add click event listener to the button
    var button = document.getElementById('button_64');
    if (button) {
        button.addEventListener('click', function() {
            showModal(); // Show the modal when the button is clicked
            console.log('Button clicked to show modal.');
        });
    }
});
</script>