.replace() not working on attributes in HTML string

.replace() not working on attributes in HTML string

I'm building a form that include a button to clone one of the sections. It clones fine, but I need to run a replace on it to update the numbering on all the name, id and for attributes in the new html (before writing it out). The best it does is replace the content text, it won't seem to touch the tags.

Here's my code:

  1.     var blank_post_type = $('div.post_type'), p=1; //get the default contents on page load
        $('#new_post_type').click(function(){
            p++;
            $(this).before('<div class="post_type" id="type'+p+'"></div>'); //create the new container
            $('#type'+p).animate({height:'toggle',opacity:0},0,function(){
                $(this).html(blank_post_type.replace('-1','-'+t)).animate({height:'toggle',opacity:1},500);
            });
        });






Here's what it should be doing:
- Click the New Post Type button
- A copy of the first set of inputs fade/expands in
- The inputs in that new set are named with appropriate attributes to avoid conflicts (eg <input name="type_name-1"> becomes <input name="type_name-2">)

What am I missing here?

UPDATE:
So far, this is the best I can manage:
  1. var blank_post_type = $('#type1').html(), p=1;
        $('#new_post_type').click(function(){
            p++;
            if(p>9){alert('Limit is 9');return false;}
            $(this).before('<div class="post_type" id="type'+p+'"></div>');
            $('#type'+p).animate({height:'toggle',opacity:0},0,function(){
                $(this).html(blank_post_type);
                var $contents = $(this).contents();
                var this_heading = $contents.find('h2').html();
                $contents.find('h2').html(this_heading.replace(1,p));
                $contents.find('label[for*="-1"]').each(function(){
                    var this_for = $(this).attr('for');
                    $(this).attr('for',this_for.replace('-1','-'+p));
                });
                $contents.find('input[name*="-1"],select[id*="-1"]').each(function(){
                    var this_name = $(this).attr('name');
                    $(this).attr('name',this_name.replace('-1','-'+p));
                    var this_id = $(this).attr('id');
                    $(this).attr('id',this_id.replace('-1','-'+p));
                });
                input_type_setup(p); //run click event binding for new elements
                $(this).animate({height:'toggle',opacity:1},500);
                $('html,body').animate({scrollTop:$(this).offset().top},500);
            });
        });























Instead of running a find and replace on the string before passing it, I instead had to insert it, and then go through the new contents, finding the elements that need to be updated (the labels, inputs, select, and heading).