Изменение события нажатия кнопки изображения без идентификаторов и нескольких уникальных экземпляров

Question

Вот моя проблема:

Мне нужно создать кнопки предварительного просмотра для веб-сайта библиотеки песен MP3.

Вот особенности:

• кнопки должны измениться с «Воспроизвести» на «Пауза» и вернуться к щелчкам назад
• Кнопки также должны вызвать воспроизведение () - pause () HTML5-проигрыватель аудио

У меня есть рабочий пример, ноиспользование идентификаторов для div'ов настолько тяжело, что, если их более 100, происходит сбой некоторых браузеров из-за слишком большого количества вычислений.

Я знаю, что это плохо закодировано, но мне нужно было подтверждение концепции, а неэлегантное и продуманное решение, в то время ..:)

вот живой пример того, что нужно: http://www.childrensmusicshop.com/button.php

Я использую PHP и CSS на этом.Вот код единственного экземпляра, который работает, но браузеры не работают:

<div id="<?php print $wrap_div_play_id;?>" style="position:absolute;visibility:visible;z-index:1;right:86px;margin:0 0 0 0; padding:0 0 0 0;">

<div id="<?php print $div_play_id;?>" style="position:absolute;visibility:visible;z-index:1;top:-15px;">
    <img src="/images/bouton-play.png" onclick="document.getElementById('<?php print $audio_id;?>').play();document.getElementById('<?php print $div_pause_id;?>').style.visibility='visible'">
</div>

<div id="<?php print $div_pause_id;?>" style="position:absolute;visibility:hidden;z-index:2;top:-15px;">
    <img src="/images/bouton-stop.png" onclick="document.getElementById('<?php print $audio_id;?>').pause();document.getElementById('<?php print $div_pause_id;?>').style.visibility='hidden'">
</div>    

</div>


<audio id="<?php print $audio_id;?>">
<source src="<?php print $file_player_song;?>.ogg" type="audio/ogg" />
<source src="<?php print $file_player_song;?>.mp3" type="audio/mpeg" />
</audio>