Changing id of element on button click when state changes

JavaScript
1

i have been trying to change an id of html5 audio element on button click which when button click it will change the src of audio element and plus the id of audio element
when i click the button audio element get src``` from the state and get id from the state my problem i use `
document.getElementById(“player”).play()

when i cliked the element it set source and id of player but music not playing because id of audio element is not fixed id it keep changes based on button id

document.getElementById({clicked_id}).play()

am just confused how to ask can someone understand what am trying to 
or simple
```document.getElementById(**here change id player based on state that music id**).play()

the whole code

class Why extends React.Component {
    constructor(props){
        super(props)
    this.state={DrumMachine:{Q:{src:"https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",text:"Heater-1",id:"Q"},A:{src:"https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3",text: "Heater-4",id:"A"},C:{src:"https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",text:"Closed-HH"},E:{src:"https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",text:"Heater-3"},X:{src:"https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3",text:"Kick"},Z:{src:"https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3",text:"Kick-n'-Hat"},W:{src:"https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",text:"Heater-2"},S:{src:"https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",text:"Clap"},D:{src:"https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3",text:"Open-HH"}},
    musicurl:"",
    playerId:""
}
   this.player=this.player.bind(this)     
    }

   player=(clicked_id)=>{

    this.setState({musicurl:this.state.DrumMachine[clicked_id].src})
    this.setState({playerId:this.state.DrumMachine[clicked_id].id})
    
    document.getElementById({clicked_id}).play()
   } 
   render(){
    return (
      <div className="App">
    <button id="A" onClick={e=>this.player(e.target.id)}>Play A:</button>
    <button id="Q" onClick={e=>this.player(e.target.id)}>Play Q:</button>
    <p border> {this.state.playerId}</p>
    <audio controls src={this.state.musicurl} id={this.state.playerId} ></audio>
      </div>
    );
  }
}                                                                                                                                                              


ReactDOM.render(<Why />, document.getElementById('root'));

if i make the audio player id constant it will play well and app is working