How to change the entire div content on button click

(function(){
    function printButtons(){
        // array to store the HTML output
        const output = [];

        // loop to get all the buttons
        myBtnsArr.forEach((button) => {
            let myBtn = `<button class="${button.class}" id="${button.id}">
                            ${button.content}
                         </button>`;
            //print the results
            output.push(myBtn);
            buttonsDiv.innerHTML = output.join('');
        });
    }

    // the div we're going to print the buttons in it
    const buttonsDiv = document.getElementById('allBtns');
    // all the buttons (in an array)
    const myBtnsArr = [
        {class: 'myBtn', id: 'button1', content: 'button 1'},
        {class: 'myBtn', id: 'button2', content: 'button 2'},
        {class: 'myBtn', id: 'button3', content: 'button 3'}
    ];

    // Run the function 
    printButtons();
})();


// Get the button
let myBtn1 = document.getElementById('button1');
let myBtn2 = document.getElementById('button2');
let myBtn3 = document.getElementById('button3');
let myDiv = document.getElementById('myDiv');

// Run the "createdNewDiv" function when clicking on the button, passing the text as an argument
myBtn1.addEventListener('click', () => {
    let button1Text = "This is button 1 text";
    createNewDiv(button1Text);
});
myBtn2.addEventListener('click', () => {
    let button2Text = "This is button 2 text";
    createNewDiv(button2Text);
});
myBtn3.addEventListener('click', () => {
    let button3Text = "This is button 3 text";
    createNewDiv(button3Text);
});

// When calling the functuin....
function createNewDiv(text){
    // 1- We create a new div 
    let theNewDiv = document.createElement('div');
    theNewDiv.classList.add('createdDiv');
    
    // 2- We create a new pagaraph to hold the text we passed 
    let thewNewPagaraph = document.createElement('p');
    thewNewPagaraph.classList.add('createdParagraph');
    thewNewPagaraph.innerHTML = text;
    
    // append the 'p' to the 'div'
    theNewDiv.appendChild(thewNewPagaraph);
    
    // append the new div to the original div
    myDiv.appendChild(theNewDiv);
    
    // when clicking on the new div we delete it, then we see the original div back.
    let createdDiv = document.querySelector('.createdDiv');
    createdDiv.addEventListener('click', () => {
        createdDiv.remove();
    });
}

#myDiv {
    border: 1px solid;
    width: 400px;
    height: 200px;
    padding: 20px 0;
    text-align: center;
    position: relative;
    border-radius: 4px;
}

#allBtns {
    display: flex;
    justify-content: space-around;
}

.createdDiv {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ebebeb;
    border-radius: 4px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

        <div id="myDiv">
            <div id="allBtns"></div>
            <h4 id="myHeading">My h4</h4>
            <h4 id="myParagraph">My pagaraph</h4>
        </div>