Ajax post vote problem

[youlichika]

I need click `ben10` that `<h2>you voted</h2>` will display in its' child `<div class="message"></div>`. click `winx` that `<h2>you voted</h2>` will display in its' child `<div class="message"></div>`.
click `pocoyo` that `<h2>you voted</h2>` will display in its' child `<div class="message"></div>`.

but my code not worked. can anyone help me?
and if I add it with other jquery plungin, How to change the `$` so that all the js code run well? Thanks.

JS CODE

$(function() {
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='up'){
$(this).fadeIn(2).html(' ');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
context: this,
success: function(html){
parent.html(html);   // show the total number of votes                    
$(this).children('.message').fadeIn(100, function() {
$(this).children('.message').html("<h2>you voted</h2>");
})
$(this).children('.message').fadeOut(5000, function() {
$(this).children('.message').html('');
})
}
});
}
return false;
});
});

CSS CODE

.message{display:none;}

HTML CODE

<div class='up'>
<a href="" class="vote" id="id1" name="up">ben10</a>
<div class="message"></div>
</div>
<div class='up'>
<a href="" class="vote" id="id2" name="up">winx</a>
<div class="message"></div>
</div>
<div class='up'>
<a href="" class="vote" id="id3" name="up">pocoyo</a>
<div class="message"></div>
</div>