Question - I want to know how DOM distinguishes between the same element?

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>
  );
}

In this code sample, there are two identical buttons but when I click on either of those buttons. The Popper automatically aligns itself according to that particular button (as shown in the images).button 1 button 2

when I console.log anchorEl on either of the buttons, I get <button type="button">Toggle Popper</button>. so how does Dom distinguish between these identical buttons?