request for jquery related simple help
<p>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. 
<img src="http://i.stack.imgur.com/Ut1PD.jpg" alt="alt text"></p>

<p>Here's the original code:
Jquery:</p>

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

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

   success: function(html)   {
       parent.html(html);
  }   
 });
}
return false;
 });
});
&lt;/script&gt;
</code></pre>

<p>and here's html part:</p>

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

<p>Here's Css:</p>

<pre><code>&lt;style type="text/css"&gt;
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;
}


&lt;/style&gt;
</code></pre>

<p>Thank you very much for helping.</p>
