Having two jPlayers on a page at the same time. Problem

I've got a little site mockup here: http://designsweeter.com/live/tg/

I'm using jPlayer HTML5 audio/video. The problem is that it's in the wordpress loop and when you click the bottom one, the top one starts as well, and vice versa. How can I ensure each jPlayer plays its own audio song?

The play and pause comes from this snippet: $("#button .button").bind('mousedown', function() { $(this).bind('mouseleave', function() { $(this).unbind('mouseleave'); onClick(); }); });

$("#button .button").bind('mouseup', function() {
    $(this).unbind('mouseleave');
    onClick();
});


function onClick() {        

    if(status != "play") {
        status = "play";
        $("#button").addClass( "play" );
        player.jPlayer("play");
    } else {
        $('#button .circle').removeClass( "rotate" );
        $("#button").removeClass( "play" );
        status = "pause";
        player.jPlayer("pause");
    }
};

I'm assuming I'll need to use php and setup a variable for each post ID, which is in Wordpress by default. But how can I insert the post ID into the Javascript so that when I click the play button in #post-1, it plays THAT jPlayer audio, and when I hit the play button in #post-2, it plays the post 2 audio. It looks like a scary mixing of javascript and php, any help?

ETA: The new idea:

// play/pause

$('.button').click(function() {
  $(this).attr('id');
    onClick()
});


function onClick() {        

    if(status != "play") {
        status = "play";
        $(this).attr('id').addClass( "play" );
        player.jPlayer("play");
    } else {
        $(this).attr('id').removeClass( "开发者_运维百科rotate" );
        $(this).attr('id').removeClass( "play" );
        status = "pause";
        player.jPlayer("pause");
    }
};

http://designsweeter.com/live/tg/wp-content/themes/twentyten-five/js/zen.js

Well, you can bind click function to a class, and in function you can chech $(this) variable, for id or something else.

e.g.

HTML:

<div class="button" id="button-1">A Button</div>

...

JS:

$('.button').click(function() {
  $(this).attr('id');
  ... play music of id ...
});

EDIT:

$('.button').click(function() {
    onClick($(this).attr('id'));
});


function onClick(id) {        

    if(status != "play") {
        status = "play";
        id.addClass( "play" );
        player.jPlayer("play");
    } else {
        id.removeClass( "rotate" );
        id.removeClass( "play" );
        status = "pause";
        player.jPlayer("pause");
    }
};