request for jquery related simple help

i'm trying to make some change in the following code which updates the number of votes by clicking on it with jquery. However, as shown in the image below, i want to display the vote number out of the box. I want to make it so that I click on the same green box, however I display the number out of the green box. I having difficulty making that.

Here's the original code: Jquery:

<script type="text/javascript">
$(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(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
   type: "POST",
   url: "up_vote.php",
   data: dataString,
   cache: false,

   success: function(html)   {
    parent.html(html);
    }  }); 
}else{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
   type: "POST",
   url: "down_vote.php",
   data: dataString,
   cache: false,

   success: function(html)   {
       parent.html(html);
  }   
 });
}
return false;
 });
});
</script>

and here's html part:

<div id="main">
<div class="box1">
<div class='up'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="up"><?php echo $up; ?></a></div>
</div>
<div class='box2' ><?php echo $msg; ?></div>
</div>

Here's Css:

<style type="text/css">
body{
font-family:'Georgia', Times New Roman, Times, serif;
}
#main{
height:80px; border:1px dashed #29ABE2;margin-bottom:7px;
width:500px;
}

a{
color:#DF3D82;
text-decoration:none;
}

a:hover{
color:#DF3D82;
text-decoration:underline;
}

.up{
height:40px; font-size:24px; text-align:center; background-color:#009900; margin-bottom:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
}
.up a{
color:#FFFFFF;
text-decoration:none;
}

.up a:hover{
color:#FFFFFF;
text-decoration:none;
}

.down{
height:40px; font-size:24px; text-align:center; background-color:#cc0000; margin-top:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
}

.down a{
color:#FFFFFF;
text-decoration:none;
}

.down a:hover{
color:#FFFFFF;
text-decoration:none;
}

.box1{
float:left; height:80px; width:50px;
}

.box2{
float:left; width:440px; text-align:left;
margin-left:10px;height:60px;margin-top:10px;
font-weight:bold;
font-size:18px;
}


</styl开发者_运维技巧e>

Thank you very much for helping.

Here's a fiddle for you.

In short, number goes inside an element defined by parent variable. Replace parent = $(this) with parent = $(this).parents('.box1') and parent.html(html) inside ajax callback with parent.append(html)

Update

After a bit more fiddling: http://jsfiddle.net/CE4xh/1/.

I added <div class="number"></div> after <div class="up">, this is a placeholder for a number. There is a CSS class .number for it, making it red and centered. In this variant of the code you don't have to change ajax callbacks, you just need to set parent = $(this).parents('.box1').find('.number')