jQuery error, only with Explorer
<p>I have a custom jQuery script that works fine in all bowsers but one (Explorer 6, 7, 8?). </p>

<p>The purpose of the code is to allow a user to add multiple form fields to their form (if the user want more than one phone number or more than one web address). </p>

<p>It is written so that any "A" tag with a class containing "add" is bound to the jQuery function.</p>

<p>The error I am getting is as follows:</p>

<pre><code>///////////////////////////////
Line: 240
Char: 5
Error: 'this.id.3' is null or not an object
Code: 0
///////////////////////////////
</code></pre>

<p>HTML of form:
(please note that I am aware that the form tags are not here, this is a small portion of a larger form.</p>

<pre><code>&lt;ul&gt;
&lt;li&gt;
    &lt;ul&gt;
    &lt;li class="website"&gt;
     &lt;input id="website1_input" name="website[1][input]" type="text" value="www.test.org"/&gt;
     &lt;input type="checkbox" id="website1_delete" name="website[1][delete]" class="element radio" value="1" /&gt;
     &lt;label for="website1_delete"&gt;Delete&lt;/label&gt;     
    &lt;/li&gt;
    &lt;/ul&gt;
    &lt;a href="#" id="addWebsite"&gt;add another website&lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And now the jQuery:</p>

<p>There should be on a page a ul containing at least one li.
All the lis should have a certain class like "phone" or "address"
After the /ul There should be a link with a matching id, like
"addPhone" or "addAddress".   The href attribute should be "#".</p>

<pre><code>function makeAddable(theClass) {
  $('#add' + theClass[0].toUpperCase() + theClass.substr(1)).click(function() {
    var numItems = $('.' + theClass).length;
    var newItem = $('.' + theClass).eq(numItems - 1).clone();
    newItem.find('input[type=text]').val('');
    numItems++; // number in the new IDs

    // keep ids unique, linked to label[for], and update names
    // id &amp; for look like: phone1_type, phone1_ext, phone13_p1, etc.
    // names look like: phone[1][type], phone[1][ext], phone[13][p1], etc.
    newItem.find('[id^=' + theClass + ']').each(function(i) {
      var underscoreIndex = this.id.indexOf('_');
      var idNum = this.id.substring(theClass.length, underscoreIndex);
      this.id = this.id.replace(idNum, numItems);
    });
    newItem.find('[for^=' + theClass + ']').each(function(i) {
        var jqthis = $(this);
        var forAttr = jqthis.attr('for');
        var underscoreIndex = forAttr.indexOf('_');
        var idNum = forAttr.substring(theClass.length, underscoreIndex);
        forAttr = forAttr.replace(idNum, numItems);
        jqthis.attr('for', forAttr);
    });
    newItem.find('[name^=' + theClass + ']').each(function(i) {
        var jqthis = $(this);
        var nameAttr = jqthis.attr('name');
        var bracketIndex = nameAttr.indexOf(']');
        var idNum = nameAttr.substring(theClass.length + 1, bracketIndex);
        nameAttr = nameAttr.replace(idNum, numItems);
        jqthis.attr('name', nameAttr);
    });

    $(this).prev('ul').append(newItem);
    return false;
  });
}

// Automatically enable all &lt;a href="#" id="addSomething"&gt; links
$(function() {
  $('a[href=#][id^=add]').each(function(i) {
    makeAddable( this.id[3].toLowerCase() + this.id.substr(4) );
  });
});
</code></pre>
