How to update a number in html via javascript?

Question

After a voter votes, I want to update the count.

<form class="vote-form" action="">
  <div id="{{key}}" class="vote-count">{{votes}}</div>
  <input class="vote-button" type="submit" class="text-button" value="vote+"/>
  <input type="hidden" class="brag" name="brag" value="{{key}}">
  <input type="hidden" class="voter" name="voter" value="{{current_user.fb_id}}">
</form>

<script type="text/javascript">
  $(function() {  
    $('.error').hide();  
    $(".vote-form").submit(function() { 
      var inputs = $(this).find('input:hidden');
      var key = $('input.brag', this).val();
      $.ajax({
        type: "POST",  
        url: "/bean",  
        data: inputs,  
        success: function() {  
          //not sure how to do this, I want to increment {{votes}}
          $('#' + key).innerHTML = "foo"; 
        }  
      });  
      return false;
    });  
  });
</script>

Answer 1

var $div = $('#' + key),
    intValue = parseInt($div.html(), 10);

$div.html(++intValue);

Answer 2

If you want to blindly add 1 to whatever value is in the HTML already:

$('#'+key).html(function(i,old){ return old*1 + 1; });

I would, however, advocate having your server return the correct vote count in response to /bean and using this to update the HTML.