Possible To Call Function Multiple Times

I'm currently working on my first ever javascript and have run into an issue.
Source:
Code:
<script language="JavaScript">
img_width = 0;
img_height = 10;
timer = null;

function imageGrow(bar_len) {
growImg = document.getElementById('imageResize').style
growImg.width= img_width;
if(img_width != bar_len) {
img_width += 10;
timer = setTimeout('imageGrow()', 20);
} else {
clearTimeout('timer');
}}
</script>

<img onLoad="imageGrow(100);" src="img/graph.jpg" border="0" width="1" height="10" id="imageResize" align="center"><br />
<img onLoad="imageGrow(50);" src="img/graph.jpg" border="0" width="1" height="10" id="imageResize" align="center"><br />

I have 2 issues. First, the second image does not call the javascript and I assume this is because both images have the same ID? Can I associate code to 2 elements? Is it even possible to call the function multiple times in the way I'm trying to? Second, as the script is written above, the image never stops growing even when it reaches '100' as specified in the script. If I change 'if(img_width != bar_len)' to if(img_width != 100) it does stop growning when it reaches 100. I am unsure why, as bar_len = 100 when I call the function! I don't know if it makes any difference, but the HTML in my final code will be dynamically generated with ASP.