如何使重复按钮仅适用于特定的div

我有一个便笺应用程序，其中显示带有编辑和删除选项的便笺。如何使“编辑/删除”按钮仅在该笔记div上起作用？现在，每当我按下编辑/删除键时，它仅适用于第一个音符，而不适用于我单击按钮的特定音符。

Display.js：

 render(){
    const notesList = this.props.notesList;
    const displayNotes = notesList.map( (note) =>
      <div className="display">
        <p id="note">{note}</p>
        <button type="button" class="edit-button" onClick={this.props.edit}>Edit</button>
        <button type="button" class="delete-button" onClick={this.props.delete}>Delete</button>
      </div> );

    return <div>{displayNotes}</div>;
  }

App.js：

handleEdit = () => {
   document.getElementById('note').contentEditable = "true";
  }