Doing different commands for each button in the same node list in JavaScript

Question

Can someone please help me here

const buttons = document.querySelectorAll('button');

for (const button of buttons) {
  console.log(buttons[0].value);

  button.onmouseenter = () => {
    console.log(buttons);

    const drop = document.createElement('div');
    const pe = (p) => {
      const text = document.createElement('p');
      text.innerText = p;
      drop.appendChild(text);
    }
    pe('comedy and romence');
    pe('mystrey');

    drop.style.width = '190px';
    drop.style.height = '130px';
    drop.style.display = 'grid';
    drop.style.placeItems = 'center';
    drop.style.border = '0px';
    drop.style.borderRadius = '25px';
    drop.style.backgroundColor = 'rgba(0, 200, 157, 0.2)';
    drop.style.animation = 'move 300ms ease-in-out forwards';

    button.appendChild(drop);
    button.onmouseleave = () => {
      button.removeChild(drop);
    }
  }
}

I am trying to make every div has his own text value like for example the first one has ' comedy and romence' and the second one has ' mystrey' .

How can I do that?