同时在一个页面上有两个jplayer.问题

我这里有一个小的网站模型:http://designsweeter.com/live/tg/

我正在使用jPlayer HTML5音频/视频。问题是，它在wordpress循环中，当你点击底部的，顶部的也开始，反之亦然。我如何确保每个jPlayer播放自己的音频歌曲?

播放和暂停来自下面的代码片段:$(" #按钮.button")。Bind ('mousedown'， function() {(美元)。Bind ('mouseleave'， function() {(美元).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");
    }
};

我假设我需要使用php并为每个帖子ID设置一个变量，这是默认情况下在Wordpress中。但是我如何将post ID插入到Javascript中，以便当我点击#post-1中的播放按钮时，它播放jPlayer音频，当我点击#post-2中的播放按钮时，它播放post 2音频。它看起来像一个可怕的javascript和php的混合，有什么帮助吗?

ETA:新想法:

// 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

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

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

$('.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");
    }
};