How to make reusable button

I'm new to JavaScript and I want to create a button that, when clicked, will change the position of the object. But after clicking once, nothing else works. Below I have provided the code with the very essence of the problem, and my code where I want to apply it. Maybe someone will tell you how to make a restart button correctly, instead of constantly creating new divs.

    <!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
    
        <style>
            button {
            position: relative;
            }
        </style>
    </head>
    <body>
    
        <button>Add new position</button>
    
        <script>
        
            const btn = document.querySelector('button');
        
            btn.addEventListener('click', () => {
                btn.style.top = '50px';
            });
        
        </script>
    </body>
</html>

MY PROJECT

const yes = document.getElementById('yes');
const no = document.getElementById('no');
const body = document.querySelector('.body');
const message = document.querySelector('.message');
const reset = document.querySelector('.panel__close')
const bodyMessage = document.querySelector('.body__message')

const randomNum = Math.floor(Math.random() *100) +1;




yes.addEventListener('click', () => {
    body.innerHTML = '';
    const paraLox = document.createElement('p');
    paraLox.textContent = 'Congratulation, Jaba Loshara Ebaniy!';
    paraLox.style.fontSize = '3rem';
    paraLox.style.textAlign = 'center';
    paraLox.style.fontWeight = '1000';
    paraLox.style.color = 'red';
    body.appendChild(paraLox);



    reset.addEventListener('click', () => { // reset button
        paraLox.parentNode.removeChild(paraLox);
    
    
        const bodyError = document.createElement('div');
        bodyError.setAttribute('class', 'body__error-image');
        bodyMessage.appendChild(bodyError);
    
        const bodyErrorImage = document.createElement('img');
        bodyErrorImage.setAttribute('src', 'error.png')
        bodyErrorImage.style.width = '50px';
        bodyErrorImage.style.height = '50px';
        bodyError.appendChild(bodyErrorImage);
    
        const bodyText = document.createElement('div');
        bodyText.setAttribute('class', 'body__text');
        bodyText.textContent = 'Jaba Lox?';
        bodyMessage.appendChild(bodyText);
    
        const bodyButtons = document.createElement('div');
        bodyButtons.setAttribute('class', 'body__buttons');
        bodyMessage.appendChild(bodyButtons);
    
        const bodyButton1 = document.createElement('div');
        bodyButton1.setAttribute('class', 'body__button');
        bodyButton1.setAttribute('id', 'yes');
        bodyButton1.textContent = 'Yes';
        bodyButtons.appendChild(bodyButton1);
    
        const bodyButton = document.createElement('div');
        bodyButton.setAttribute('class', 'body__button');
        bodyButton.setAttribute('id', 'no');
        bodyButton.textContent ='No';
        bodyButtons.appendChild(bodyButton);
    
        });


});


no.addEventListener('click', () => {
    no.style.position = 'relative';
    no.style.top = randomNum + 'px';
    no.style.bottom = randomNum + 'px';
    no.style.left = randomNum + 'px';
    no.style.right = randomNum + 'px';
});