JSFiddle - React, Tailwind, and code Playground

HTML

<div>
     <h2>Example 1</h2>

    <audio id="sound1" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls='controls' preload="none">
        <p>Your browser does not support the audio element.</p>
    </audio>
</div>
<div>
     <h2>Example 2</h2>

    <audio id="sound2" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls='controls' preload="none">
        <p>Your browser does not support the audio element.</p>
    </audio>
</div>

JavaScript

/*
var $ = function (id) {
    return document.getElementById(id);
}

var sound1_click = function () {
    $("sound2").pause(); // not sure what that ! was meant to do, so removed it, same for $('sound1').play();
}

    $("sound1").onplay = sound1_click;
   
*/
// if you want to apply for all the audios, you can simply do something like

var audios = document.getElementsByTagName('audio');
for(var i=0; i<audios.length;i++)    audios[i].onplay = pauseAllAudios.bind(null, audios[i]);

function pauseAllAudios(audio){
    for(var i=0; i<audios.length;i++)
        if(audios[i]!=audio)    audios[i].pause();    
};