Multiple instances Of Google 1 Button in post title.

So I’m trying to add the Google +1 button to every post title and excerpt title on my website. I want the +1 button on ‘excerpt title A’ to sync up with ‘Post title A’ and the +1 button on ‘excerpt title B’ to sync up with ‘post title B’.

I went to the google websites and tried adding the following code:

<div class="title">
                      <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a> <!-- Place this tag where you want the +1 button to render -->
<g:plusone></g:plusone> </h2>
                    </div>

I then placed the following code in my footer:

<!-- Place this tag after the last plusone tag -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

The problem is that this just creates one instance of the plus one button and puts it beside every post title so if I +1 one of the buttons the all get a +1.

How can I make a unique instance of the button that are unique to each post?