What in this jQuery code is failing for IE6 and IE

Question

This piece of jQuery duplicates an item in a form. It works in all browsers except for IE6 and IE7. This is because when it duplicates the form -- it does not increment the name attribute (as it does in all other browsers ) :

<div class="payment">
   <input type="text" name="payments[0][:date_paid]" id="payments_0_:date_paid">
   <input type="text" name="payments[0][:amount_paid]" id="payments_0_:amount_paid">
</div>

<div class="payment" style="display: block;">
   <input type="text" name="payments[1][:date_paid]" id="payments_1_:date_paid">
   <input type="text" name="payments[1][:amount_paid]" id="payments_1_:amount_paid">
 </div>

In IE6 and IE7, IETester's IE Interepreted Source Code looks like this :

<DIV class=payment jQuery1297204711741="16">
  <INPUT id=payments_0_:date_paid value=3/27/2008 name=payments[0][:date_paid] jQuery1297204711741="10"> 
  <INPUT id=payments_0_:amount_paid value=100 name=payments[0][:amount_paid] jQuery1297204711741="14">
</DIV>

<DIV class=payment style="DISPLAY: block" jQuery1297204711741="27">  
  <INPUT id=payments_1_:date_paid value=4/2/2008 name=payments[0][:date_paid] jQuery1297204711741="21">
  <INPUT id=payments_1_:amount_paid value=100 name=payments[0][:amount_paid] jQuery1297204711741="25"> 
</DIV>

This is the jQuery that produces it.

$(".add_another").click(function(){
  if ($(".payment:last").find("input").val() != "") {
    var $newdiv = $(".payment:last").clone(true);
    $newdiv.find('input').each(function() {
        var $this = $(this);
        $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) {
            return '_' + (+$1 + 1) + '_';
        }));
        $this.attr('name', $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) {
            return '[' + (+$1 + 1) + ']';
        }));
        $this.val('');
    });
    $newdiv.find('textarea').each(function(){
      var $this = $(this);
      $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) {
          return '_' + (+$1 + 1) + '_';
      }));
      $this.attr('name', $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) {
          return '[' + (+$1 + 1) + ']';
      }));
      $this.css("color","#cccccc");
    });
    $newdiv.insertAfter('.payment:last').hide().slideDown();
  };
  return false;
});

Answer 1

You have to clone using the outerHTML! Yikes!

      var $this = $(this);
      if (!$.browser.msie || parseInt($.browser.version) > 7) {
        $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) {
            return '_' + (+$1 + 1) + '_';
        }));
        $this.attr('name', $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) {
            return '[' + (+$1 + 1) + ']';
        }));
      } else {
        foob_name = $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) {
            return '[' + (+$1 + 1) + ']';
        });
        foob_id = $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) {
            return '_' + (+$1 + 1) + '_';
        }));

        $this.attr("outerHTML", "<input type='test' name=" + foob_name + " id=" + foob_id + " />");

      };