Pass js var into html block being added via appendTo

I've got this html which i'm injecting into the page when someone clicks a button. The html gets appended again each time the button is clicked using the js below.

<div style="display: none;">
    <div class="grab-me">
    <p>This is fieldset 1</p>
      <input name="foo[]" />
      <input name="bar[]" />
      <input name="oth[]" />
    </div>
 </div>

var count = 1;
  $(function(){
    $('.add-member').live("click", function(e){
        e.preventDefault(e);
        count += 1;
        var grab = $('.grab-me')
                .clone()
                .removeClass('grab-me')
                .appendTo('#register');

    });
 });

But what i need to do is where it says "This is fieldset 1" i need to increase that number by 1 each time so subsequent appends say This is fieldset 2, This is fieldset 3 etc etc. I can't see how i can pass a variable (my count var) in to the html block when it gets cloned that will replace that number.

Here is a jsfiddle of it: http://jsfiddle.net/tzbgA/

Any help would be great! Thanks!!

Solution

you can give the sentence you want to change class. Then using jQuery selectors change the text inside it.

<body>
  <button class="add-member">add more</button>
  <div style="display: none;">
    <div class="grab-me">
    <p class="count">This is fieldset 1</p>
      <input name="foo[]" />
      <input name="bar[]" />
      <input name="oth[]" />
    </div>
 </div>
  <div id="register">
  </div>
</body>

var count = 1;
$(function(){
    $('.add-member').on("click", function(e){
        e.preventDefault(e);        
        var grab = $('.grab-me')
                .clone()
                .removeClass('grab-me')
                .appendTo('#register')
        .find('p.count').html('This is fieldset '+count);
      count += 1;
    });
 });