How can I get audios of different HTML, which are called with the load () method of jQuery, not to interfere in certain div?

HTML

<div class="fondo">

 <section class="channels">

   <ul>
      <li><button id="Hitlist">Ch.1 - Hitlist</button></li>
      <li><button id="ElektroXploit">Ch.2 - ElektroXploit</button></li>
      <li><button id="Classic_Hits">Ch.3 - Classic Hits</button></li>
      <li><button id="Year2K">Ch.4 - Year2K</button></li>
      <li><button id="Rocklife">Ch.5 - Rocklife</button></li>
      <li><button id="The_Beat_Street">Ch.6 - The Beat Street</button></li>
      <li><button id="On_The_Road">Ch.7 - On The Road</button></li>
      <li><button id="Ritmo_Latino">Ch.8 - Ritmo Latino</button></li>
      <li><button id="Britdreams">Ch.9 - Britdreams</button></li>
      <li><button id="Poplife">Ch.10 - Poplife</button></li>
    </ul>

 </section>


 <section class="reproductor" id="reproductor">


 </section>

CSS

.fondo { background: #212121;
     padding: 20px 0px 0px 0px;
     width: 100%; 
     margin-bottom: -20px;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;  } 




.channels { width: 300px;
          height: 800px; 
        margin-left: 0;
        margin-top: -20px;
        background: white;
        overflow-y: scroll; }

.channels button {  width: 270px;
                height: 100px; 
                background: transparent;
                  border: none;
                  font-size: 25px;
                  padding-left: 0;
                text-align: left;
                cursor: pointer; }                                                               

.channels ul { padding-left: 0; 
           margin-bottom: 0;
           margin-top: 0; }

.channels li { width: 270px;
           padding: 2px;
           padding-left: 10px; }

.channels li:nth-child(2) { background: #E6E6E6; } 

.channels li:nth-child(4) { background: #E6E6E6; }

.channels li:nth-child(6) { background: #E6E6E6; }

.channels li:nth-child(8) { background: #E6E6E6; } 

.channels li:nth-child(10) { background: #E6E6E6; }        



.reproductor { width: 1200px;
            height: 800px;
            margin-top: -20px;
            margin-bottom: 0px; 

            background: black;
            padding: -5px 0px 0px 60px;
            color: white; }

JS

$(document).ready(function() {


  $("#Hitlist").click(function(){
    $(".reproductor").load("1Hitlist.html");   

});


 $("#ElektroXploit").click(function(){
    $(".reproductor").load("2Elektro.html");
});



 $("#Classic_Hits").click(function(){
    $(".reproductor").load("3Classic.html");
});


 $("#Year2K").click(function(){
    $(".reproductor").load("4Year.html");
});


 $("#Rocklife").click(function(){
    $(".reproductor").load("5Rock.html");
}); 


 $("#The_Beat_Street").click(function(){
    $(".reproductor").load("6Beat.html");
});


 $("#On_The_Road").click(function(){
     $(".reproductor").load("7OnTheRoad.html");
});


 $("#Ritmo_Latino").click(function(){
    $(".reproductor").load("8Latino.html");
});


 $("#Britdreams").click(function(){
    $(".reproductor").load("9Britdreams.html");
});


  $("#Poplife").click(function(){
    $(".reproductor").load("10Poplife.html");
});
});

What you see here is the code of the page. While everything works. When I click on each button of the respective list. Each sound of the different players overlap.