IE7 .clone issue

See instructions within the page.

HTML

<a href="javascript:;" id="recheck">re-check</a>
    <a href="javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&amp;&amp;F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');">Firebug Lite</a>

    <h1>Instructions</h1>
    <ol>
        <li>
            click <em>Add Note</em>; observe the notification box reporting the
            expected values for the newly created <code>textarea</code>'s
            <code>id</code> and <code>name</code> attributes
        </li>
        <li>
            repeat the previous step three times
        </li>
        <li>
            click <em>re-check</em> to check the values for the third note,
            independent of the dynamic-creation process - note that the
            notification box now reports the expected <code>id</code>, but the
            <code>name</code> attribute uses an unexpected index; that of the
            very last note element
        </li>
        <li>
            repeat the first step
        </li>
        <li>
            repeat the third step, observing the same erroneous behavior
        </li>
        <li>
            activate <em>Firebug Lite</em> to inspect the DOM, confirming that
            the <code>name</code> attribute of all <code>textarea</code>s is
            identical
        </li>
    </ol>

    <p id="notify"></p>

    <form action="#" method="get">
        <fieldset>
            <legend>My Notes</legend>
            <ol>
                <li>
                    <textarea name="foo0bar" id="foo0bar"></textarea>
                </li>
            </ol>
            <input type="button" value="Add Note">
        </fieldset>
    </form>

CSS

#notify {
    border: 1px solid #318210;
    padding: 5px;
    background-color: #C0FAB4;
}

JavaScript

(function($) {
 
 var noteCount = $("fieldset li").length;
 
 var debug = function(args) {
     var msg = Array.prototype.join.call(arguments, " || ");
     $("#notify").text(msg);
 };
 
 var addNote = function(ev) {
     var container = $(this).closest("fieldset");
     var template = $("ol li:last-child", container);
 
     noteCount++;
     var id = "foo" + (noteCount - 1) + "bar";
 
     var clone = template.clone(true, true);
     clone.find("textarea").val("").attr("id", id).attr("name", id);
 
     $("ol", container).append(clone);
 
     var el = $("ol li:last-child textarea", container);
     debug("#" + noteCount, el.attr("id"), el.attr("name"));
 
     return false;
 };
 
 $(document).ready(function($) {
     $("input").click(addNote);
     $("#recheck").click(function(ev) {
         var el = $("ol li textarea").eq(2);
         debug("3rd note", el.attr("id"), el.attr("name"));
     });
 });
 
 })(jQuery);