How to use dynamic element ID with Javascript onClick event for JPlayer

I’ve tried to figure this out myself and I usually wont stop until I figure something out. However, this has got me stumped.

Our unique situation involves using a WooCommerce product loop that displays a number of products on our homepage. When a user mouses over a product image, an overlay then displays with a play button, and a few other useful icons.

Upon clicking this play button, our JPlayer should simply play the associated mp3 file. I’ve figured out how to get it to play the mp3 file, based on the product that is displayed. However, I soon realized that I have to specify a unique ID for each product that is displayed, otherwise the player will not play more than one song on the same page. Hope I haven’t lost anyone yet.

So I figured, why not use the post id as the unique identifier? Below is the link tag that I’m using for the play button overlay.

<a id="myPlayButton-<?php the_id(); ?>" data-mp3file="<?php echo $file; ?>" data-mp3title="<?php the_title(); ?>" href="#">
<i class="icon-control-play i-2x"></i>
</a>

As you can see, I’m uniquely identifying this button (and each one in the loop), which generates an ID such as: “myPlayButton-1234”

My issue is that once I have this new ID, I cannot figure out how to use this unique ID in my javascript code. If I simply define a normal ID (something like “myPlayButton”), the code works fine. But it will only play the first song in the loop. I can’t figure out how to use that ID above in my code.

Here’s the jplayer code that works, but only plays the first song in the loop (because the ID isn’t unique for each element):

<script type="text/javascript">
$("#myPlayButton").click(function () {
             var playbutton = document.getElementById("myPlayButton");
             var mp3id = playbutton.getAttribute('data-mp3file');
             var songtitle = playbutton.getAttribute('data-mp3title');
                 $("#jplayer_N").jPlayer("setMedia", {mp3: mp3id, title: songtitle}).jPlayer("play");
         });
</script>

And here’s the jplayer code we’re trying to use:

<script type="text/javascript">
$("<?php echo '#myPlayButton-'.the_id(); ?>").click(function () {
             var playbutton = document.getElementById("<?php echo 'myPlayButton-'.the_id(); ?>");
             var mp3id = playbutton.getAttribute('data-mp3file');
             var songtitle = playbutton.getAttribute('data-mp3title');
                 $("#jplayer_N").jPlayer("setMedia", {mp3: mp3id, title: songtitle}).jPlayer("play");
         });
</script>

I read somewhere that I can input php code inside of my javascript in the way that I did above. However, the play button simply does not work. I have tried many different methods to get that unique ID into my JS, but nothing works.

I need a way to pass the unique ID to the script so that I can get the play button to work on each post/product in the loop. Also, if it helps to know, I am including this small script in right before the closing BODY tag in my footer. If I put it anywhere else, it doesn’t work. Perhaps I’m not using it in the right place?

Can anyone guide me in the right direction? If I haven’t included enough info, I apologize. I’m new to this site. I’ve been a lurker for quite a while.

Thanks so much!