<form>
<table>
<tbody id='target'>
<tr id="dolly"><td><input name="hobby[0]" /></td></tr>
</tbody>
</table>
</form>

<input type="button" onclick="AddRow('dolly', 'target') />

newRow.td.input.name = "hobby[1]";

var inputs = document.getElementsByTagName("input");
var i;
for(i=0; i < inputs.length; i++)
      inputs[i].name="my_name";

clonedfield = document.getElementsByName('hobby[0]')[1];
clonedfield.name = 'hobby[1]';

// error: clonedfield undefined in IE7. Works in FF2.
clonedfield = document.getElementsByName('hobby[1]')[0];

// if index == 1, nothing returns from getElementsByName
// if index == 0, everything is returned. zzz

alert('getting ' + 'hobby['+ index +']');
inputs = document.getElementsByName('hobby['+ index +']');
for(var i = 0; i < inputs.length; i++)
{
    alert(inputs[i].name);
}

//////////////////////////////////////
// In IE7,
// expecting an array of five <select>
var hobbies = document.getElementsByName('hobby');
for(var i = 0; i < hobbies.length; i++)
{
     // hobbies.length == 5
     hobbies[i].name = 'hobby[' + i + ']';
     // hobbies.length == 5
}

//////////////////////////////////////
// In FF2
// apparently a reference to the function result is returned
var hobbies = document.getElementsByName('hobby');
for(var i = 0; i < hobbies.length; i++)
{
     // hobbies.length == 5
     hobbies[i].name = 'hobby[' + i + ']';
     // hobbies.length == 4
}

//////////////////////////////////////
// As such, In FF, I have to do
var hobbies = document.getElementsByName('hobby');
num_hobbies = product_ids.length;
or(var i = 0; i < num_hobbies ; i++)
{
      hobbies[0].name = 'hobby[' + i + ']';
      
      // re-retrieve objects
     var hobbies = document.getElementsByName('hobby');
}
// However, this code does not work in IE7!
// IE7 doesn't know about the changed names
// and subsequent getElementsByName() will not work properly!