Pregunta: ¿Quiero saber cómo DOM distingue entre el mismo elemento?

 import * as React from "react"; import Box from "@mui/material/Box"; import Popper from "@mui/material/Popper"; export default function SimplePopper() { const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); console.log(anchorEl); const handleClick = (event: React.MouseEvent<HTMLElement>) => { setAnchorEl(anchorEl ? null : event.currentTarget); }; const open = Boolean(anchorEl); const id = open ? "simple-popper" : undefined; return ( <div> {/* button 1 */} <button type="button" onClick={handleClick}> Toggle Popper </button> {/* button 2 */} <button type="button" onClick={handleClick}> Toggle Popper </button> <Popper id={id} open={open} anchorEl={anchorEl}> <Box sx={{ border: 1, p: 1, bgcolor: "background.paper" }}> The content of the Popper. </Box> </Popper> </div> ); }

En este ejemplo de código, hay dos botones idénticos, pero cuando hago clic en cualquiera de esos botones. El Popper se alinea automáticamente de acuerdo con ese botón en particular (como se muestra en las imágenes). botón 1 botón 2

cuando hago console.log anchorEl en cualquiera de los botones, obtengo <button type="button">Toggle Popper</button> . Entonces, ¿cómo distingue Dom entre estos botones idénticos?