[jQuery] [novice Q] click() only binds to first match

Hi all,

I have 3 images. I want one of them to be displayed, and when user
clicks either on <span>1</span> or <span>2</span> to swap the
displayed image with the clicked one.

Here is my (semi-functional) shot at it:
$(document).ready( function() {
$('#altImg').click( function(){
var mainImgSrc=$('img#mainImg').attr('src');
$('img#mainImg').attr('src',$(this).attr('src'));
$(this).attr('src',mainImgSrc);
return false;
});
});

<img id="mainImg" class='box' src='images/avatar.png'/>
...
<span class="box" id="altImg" src="images/avatar1.png">1</span>
<span class="box" id="altImg" src="images/avatar2.png">2</span>

It works only for the first span (i.e. successful back & forth
swapping of displayed and <span> image). The second <span> is immune
to clicking. Any reason why my click() binds only to the first and not
all occurrences of #altImg ?

TIA,
--thalis

ps. I swaped the positions of the <span>'s and still only binds to the
first occurrence