getElementById and innerText only changes one, not all - getelementbyid

Question

I have searched up and down for days, no luck. Please help. This projec will only be used in IE7, it has a text box that you enter your name, and onclick should populate that name into all the spans. this is where I am at, but it only changes the first span.
Please Help. Thank you.
<form>
<input id="i" value="My_Name">
<input type="button" value="Enter"
onClick="document.getElementById('initials').innerText= i.value;">
</form>
<span id="initials">name</span>
<br />
<span id="initials">name</span>
<br />
<span id="initials">name</span>
<br />
<span id="initials">name</span>

Answer 1

An element's id should be unique in the document. You cannot use the same id for multiple elements. Some options:
Give the elements different IDs and retrieve them independently using multiple invocations of getElementById
Retrieve the elements by tag name using getElementsByTagName and loop over the results. (Consider wrapping the common span elements in a div and selecting by tag name relative to that wrapper.)
Give the elements a common class name and use some implementation of getElementsByClassName to retrieve the results
Give the elements a common value for the name attribute (which does not need to be unique) and use getElementsByName.

Answer 2

The rule is that id should be different where you are using same initials id for all span elements. You can give them different ids and try like this:
document.getElementById('initials1').innerText= i.value;
document.getElementById('initials2').innerText= i.value;
document.getElementById('initials3').innerText= i.value;
document.getElementById('initials4').innerText= i.value;
So you can modify your html like this:
<span id="initials1">name</span>
<br />
<span id="initials2">name</span>
<br />
<span id="initials3">name</span>
<br />
<span id="initials4">name</span>
And
<form>
<input id="i" value="My_Name">
<input type="button" value="Enter" onClick="doIt();">
</form>
JS:
function doIt(){
document.getElementById('initials1').innerText= i.value;
document.getElementById('initials2').innerText= i.value;
document.getElementById('initials3').innerText= i.value;
document.getElementById('initials4').innerText= i.value;
}
If you don't want to use ids, you can use getElementsByTagName and change function like this:
function doIt(){
var spans = document.getElementsByTagName('span');
for(var i = 0; i < spans.length; i++){
spans[i].innerText = document.getElementById('i').value;
}
}