Change image button onclick event, without IDs and on multiple unique instance

[evilone]

Here's my problem :I'd need to create preview buttons for a MP3 songs library web site.Here are the specifics :

• The buttons must change from Play to Pause and revert back on clicks
• The buttons must also trigger the play()-pause() HTML5 audio player

I have a working example online but the use of ID's for divs is so heavy that if there are more than 100 instances, it makes some browsers crash because of too much computing.I know this is poorly coded but i needed a proof a concept, not an elegant and production saavy solution, at the time.. here is a live example of what is needed : http://www.childrensmusicshop.com/button.phpI use PHP and CSS on this one. Here is the single instance code that IS working but keep the browsers crashing :\[code\]<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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/questions/7645722/<?php print $file_player_song;?>.ogg" type="audio/ogg" /><source src="http://stackoverflow.com/questions/7645722/<?php print $file_player_song;?>.mp3" type="audio/mpeg" /></audio> \[/code\]