JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-audio">

        <h1>The img </h1>

        <audio class="pas" controls  loop autoplay>

                   <source src="https://www.mboxdrive.com/Coobie_-_Miss_You_(Official_Lyric_Video)(256k).mp3" type="audio/mp3">

                   Your browser dose not Support the audio Tag

               </audio>

</div>

    <div class="container-audio">

        <h1>The img </h1>

        <audio class="pas" controls  loop autoplay>

                   <source  src="https://www.mboxdrive.com/Drake_-_One_Dance_(Lyrics)_ft._Wizkid_&_Kyla(128k).m4a" type="audio/mp3">

                   Your browser dose not Support the audio Tag

               </audio>

</div>

<button onclick="sub()">click me </button>

JavaScript

document.addEventListener('DOMContentLoaded', () => {

   
ms();
});
    

    



function ms() {

    var btns= document.getElementsByClassName("pas");

    for (var j = 0; j < btns.length; j++) {

        

        document.addEventListener('play', function(e){

                var audios= document.getElementsByClassName("pas");

     for(var i = 0;i<audios.length;i++){

         if(audios[i] != e.target){

            audios[i].pause();

        }

        if(audios[i].ended){

            console.log("fff");

        }

        

    }

    

}, true);

}

}