Работает воспроизведение трека только у первого блока из базы данных, что изменить?

Question

[ivan12_12_19]

У меня есть бд и вывод треков на страницу через php

<?php
            
							$dbUser = 'root';
							$dbName = 'RusDrill';
							$dbPass = '';
							$mysqli = new mysqli('localhost', $dbUser, $dbPass, $dbName);
							$query = "set names utf8";
							$mysqli->query($query);
							$query = "select * from music WHERE Rus_or_Eng='Eng'  ORDER BY Ball DESC";
							$results = $mysqli->query($query);
               
							while($row = $results->fetch_assoc()){
								echo '
                                
                              <div class = "block4" >
                                    <div class="roga">
									<img  class="img_foto2" src="'.$row["Foto"].'" alt="" />
                                     </div>
									<div class="text2">
                                    
                                    
										<h3>'.$row["Nazvanie"].'</h3>
                                        <hr>
										<p>'.$row["Artist"].'</p>
                                        
                                        
                                        <div class="content">
        
 
                               <div class="right-col">
             
                               
                               </div>
                                  </div>
                                  
                                        
                                        <audio id="mysound">
                                        <source src="'.$row["Music"].'" type="audio/mp3">
                                        </audio>
                                        
									
								</div>
							</div>
                             
                            
								';
							}
						?>

И есть скрипт на запуск и паузу трека, по нажатию на фото из бд, работает только на первом элементе. Я понимаю что нужно чтобы у каждого был свой адрес, но до конца не могу сделать, помогите.

<script>
        var mysound = document.getElementById("mysound");
        var rogan = document.querySelector(".roga");
 
        
      
        rogan.onclick = function() {
            if (mysound.paused) {
 
                
                mysound.play();
                rogan.src = "https://media.geeksforgeeks.org/wp-content/uploads/20210402235545/Pause.png";
            } else {
 
                
                mysound.pause();
                rogan.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210402235520/play.png";
            }
        }
    </script>

Comments

[maksam07]

Как минимум, идентификатор должен быть уникальным

[ivan12_12_19]

я понимаю, но как сделать то

[iljaGolubev]

ivan12_12_19,

echo '
...
<img  class="img_foto2" src="'.$row["Foto"].'" data-audio="mysound'.$row["Id"].'"  alt="" />
...
 <audio id="mysound'.$row["Id"].'">
...
';

<script>
        var rogan = document.querySelectorAll(".roga");          
        rogan.forEach(el=> {
                 el.addEventListener('click', () => {
                         document.getElementById(el.dataset.audio).play()
                 } 
      });