Не до конца работает javascript

есть вывод из базы через php

<div id="eng_treki" class="tabcontent">
    <div class="block">
        <div class="blocl_in_block">
            <?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" >
                    <img id="icon" class="img_foto2" src="'.$row["Foto"].'" alt=""/>
                    <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>';
            }
            ?>
        </div>
    </div>
</div>
<script>
    var mysound = document.getElementById("mysound");
    var icon = document.getElementById("icon");

    icon.onclick = function() {
        if (mysound.paused) {
            mysound.play();
            icon.src = "/Pause.png";
        } else {
            mysound.pause();
            icon.src ="/play.png";
        }
    }
</script>

И есть код javascript, работает но не до конца. Проблема в том что, при наведении на block4 из php только на последней записи появляются кнопки плей и пуск, а на остальных блоках нет. Как исправить?