HTML tags break javascript

Hello,

I have a quick question that I cannot for the life of me figure out.

The following is my java code to extend a form:

Code:

---

<script type="text/javascript">
var counter = 0;
function add_event() {
    counter++;
    var newFields = document.getElementById('add_event').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
                newField[i].name = theName + counter;
        }
        var insertHere = document.getElementById('add_event');
        insertHere.parentNode.insertBefore(newFields,insertHere);
}
</script>

---

The script essentially acts on this sample of html:

Code:

---

<li>
    <label for="title">Title: </label><input type="text" name="title" value="" />
</li>
<li>
    <label for="time">Time: </label><input type="text" name="time" value="" />
</li>

---

Everything works fine except for the counter/adding on to theName ( newField[i].name = theName + counter).

I know exactly what the problem is... I just don't know how to fix it. If I remove the li tags, the counter will work fine and increment each "name". As soon as I put the li (see code above) tags back (or any html tag - I have tested others as well) - it breaks again and won't increment the name - it just submits the names without numbers and alas I have no usable post data.

Does anyone have any clue how to keep the html formatting there and still get the counter to increment the name?

JFYI - Javascript is not Java.

It is better to have an approximate answer to the right question than an exact answer to the wrong one...
J. Tukey

Even more proof that I don't know much about java :)