JAVASCRIPT

open div with onClick element position

function Example() {
  const [count, setCount] = useState(0);
  const [buttonPosition,setButtonPosition] = useState({
  xAxis:" ",
  yAxis:" "
  })
  
  const dataValue = (event) => {
         setButtonPosition({...buttonPosition,xAxis:event.target.offsetLeft,yAxis:event.target.offsetTop})
  }

  return (
  <div>
   <div style={{height:"50px",width:"50px",border:"1px solid gray",alignItem:"center", textAlign:"center",verticleAlign:"center",position:"absolute",left:buttonPosition.xAxis,top:buttonPosition.yAxis+23}}>
       data
   </div>
  <div style={{display:"flex",flexDirection:"column",gap:"65px"}}>
    <div style={{display:"flex",gap:"7px"}}>
      <button onClick={(e) => dataValue(e)} className="first"> click 1</button>
       <button onClick={(e) => dataValue(e)} className="second" > click 2</button>
        <button onClick={(e) => dataValue(e)} className="third" > click 3</button>
         <button onClick={(e) => dataValue(e)} style={{width:"70px"}}> click 4</button>
          <button onClick={(e) => dataValue(e)}> click 5</button>
    </div>
    
     <div style={{display:"flex",gap:"7px"}}>
      <button onClick={(e) => dataValue(e)} > click 1</button>
       <button onClick={(e) => dataValue(e)}> click 2</button>
        <button onClick={(e) => dataValue(e)}> click 3</button>
         <button onClick={(e) => dataValue(e)}> click 4</button>
          <button onClick={(e) => dataValue(e)}> click 5</button>
    </div>
    </div>
   </div>
  );
}