increment element ID problem

increment element ID problem

I am having a problem with my script that clones the exsisting div increments the ID and then appends the results to the new div. The result show and they increment the first time but after that they never continue to increment passed 1.
 Am I going about this all wrong?
 
i have a jfiddle link to some test code as well if you need.
 
 
var mycount = 0;
mycount = parseInt(mycount);
 
$('#copy').unbind('click');
$('#copy').click(function() {
var template = $('.person').clone();
mycount++;
var new = template.clone().find(':input').each(function(){
      var newId = this.id.substring(0, this.id.length-1) + mycount;
       this.id = newId;     
      }).end()
.attr('class', 'person' + mycount)
       .prependTo('#new');
      });
});
 
 
<div class="person">
      First Name:<input type="text" class="c" ID="first_name_0" value="">
      Last Name:<input type="text" class="c" ID="last_name_0" value="">
</div>
 
<div id="copy">New person</div>
 
<div id="new"></div>