JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
  <figcaption>FIP Rock</figcaption>
  <audio id="audio1" src="http://direct.fipradio.fr/live/fip-webradio1.mp3"></audio>
  <div class="audio-controls">
    <button type="button" class="play" data-audio="audio1">Play</button>
    <button type="button" class="pause" data-audio="audio1">Pause</button>
  </div>
</figure>

<figure>
    <figcaption>FIP Jazz</figcaption>
    <audio id="audio2" src="http://direct.fipradio.fr/live/fip-webradio2.mp3"></audio>
    <div class="audio-controls">
      <button type="button" class="play" data-audio="audio2">Play</button>
      <button type="button" class="pause" data-audio="audio2">Pause</button>
    </div>
</figure>

CSS

.audio-controls button {
  width: 50px;
  height: 50px;
  border-radius: 15px;
}

JavaScript

const playButtons = document.querySelectorAll('.audio-controls .play');
const pauseButtons = document.querySelectorAll('.audio-controls .pause');

playButtons.forEach(playButton => {
	playButton.addEventListener('click', e => {
  	document.getElementById(e.target.dataset.audio).play();
  });
});

pauseButtons.forEach(pauseButton => {
	pauseButton.addEventListener('click', e => {
  	document.getElementById(e.target.dataset.audio).pause();
  });
});