2 этапа кнопка в JQuery

Я новичок в jQuery, поэтому, пожалуйста, не судите меня слишком строго!

Я делаю страницу со списком видео, под каждым видео есть кнопка голосования. Кнопка работает в 2 этапа: сначала вы нажимаете на нее, чтобы развернуть кнопку, а затем второй щелчок должен подтвердить голосование с использованием PHP / Ajax. Если вы нажмете другую кнопку перед отправкой, она должна сбросить первую.

Я собрал нижеприведенное, чтобы попытаться сделать это, первый раздел — это расширение кнопки, затем второй — это голосование. Это отчасти работает, но я заметил, что если вы нажмете одну кнопку, затем другую, а затем вернетесь к первой, она подает голос. Любые идеи о том, как я могу заставить это работать? Или лучший способ работы?

Заранее спасибо!

<script>
$(window).load(function(){
$("ul li .button").click(function() {
$("ul li .button").removeClass("active-button");
$("ul li .button").text("Vote for this");
$(this).addClass("active-button");
$(this).text("Submit vote");
stop;
});
});

$(document).on("click", "ul li .button", function () {
if ( $(this).hasClass( "active-button" ) ) {
$("ul li .active-button").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);

if (name=='up')
{
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,

success: function(html)
{
parent.html(html);
}
});
}
});
}
});
</script><ul class="videos clearfix">
<?php include('config.php');
$sql=mysql_query("SELECT * FROM messages LIMIT 4");
while($row=mysql_fetch_array($sql))
{
$msg=$row['msg'];
$mes_id=$row['mes_id'];
$up=$row['up'];
$title=$row['title'];
?>

<li>
<h2><?php echo $title; ?></h2>
<?php echo $msg; ?>
<div id="<?php echo $mes_id; ?>" name="up" class="button vote">Vote for this</div>
</li>

?php } ?>

</ul>