Resizing images with javascript on a JSF page in a ui:repeat : I need to resize images sitting in JSF's repeat loop. 

This is the loop: 

    <ui:repeat value="#{searchResults.products}" var="product">
        <img id="thumbnailId" src='#{product.thumbnailUrl}' class="img-responsive galleryproductimg" style="border: 0px solid blue; margin-top:10px;" />
    </ui:repeat>

And my `javascript code`:

    <h:outputScript target="head"> 
       $(document).ready(function() {
	      console.log("ready to go");	
	      var imgs = getElementsById("thumbnailId");
	      for (var i = 0; i &lt; imgs.length; i++) {
		     var img = imgs[i];
		     img.onload = function () {
		     console.log("image is loaded");
	      }
          resizeImage(img);
	   }	
    });

The methods called from this: 

	function getElementsById(elementID) {		
	    var elementCollection = new Array();
	    var allElements = document.getElementsByTagName("*");
	
	    for(i = 0; i &lt; allElements.length; i++) {
	        if(allElements[i].id == elementID)
	            elementCollection.push(allElements[i]);
	
	    }
	    return elementCollection;
	}

And

    function resizeImage(img) {
			console.log("width, height, src " + img.width + ", " + img.height + ", " + img.src);
		    console.log("loaded? " + img.complete);
		    
		    var width = img.width;
		    var height = img.height;    
			var constant = 100;
		    var ratio = width / height;
		    console.log("ratio " + ratio);
		    
		    if(width > constant || height > constant) {
				var newWidth = constant;
				var newHeight = constant*ratio;
		
		    	if(width &gt; height) {
		    		newWidth = constant;
		    		newHeight = constant*ratio;
		    	} else {
		    		newWidth = constant*ratio;
		    		newHeight = constant;    		
		    	}
		    
		        console.log("newWidth, newHeight " + newWidth + ", " + newHeight);
				//img.width = newWidth;
				//img.height = newHeight;
				img.style.width = newWidth + "px;";
				img.style.height = newHeight +  + "px;";
				
			    console.log("img from url AFTER " + img.width + ", " + img.height);   
		    }
		    console.log("==========================");
     }

The code seems right, and works for one image. But not inside the repeat. The output I get is this: 

    ready to go
    resizeImages called
    width, height, src 84, 110, http://thumbs1.ebaystatic.com/m/mPlrV_wS_b1vK9avUQ22r9w/140.jpg
    loaded? true
    ratio 0.7636363636363637
    newWidth, newHeight 76.36363636363637, 100
    img from url AFTER 84, 110
    ==========================
    width, height, src 86, 110, http://thumbs1.ebaystatic.com/m/mIeHLNVqUI1opFM0NmZvH_A/140.jpg
    loaded? true
    ratio 0.7818181818181819
    newWidth, newHeight 78.18181818181819, 100
    img from url AFTER 86, 110
    ==========================
    2 image is loaded

So basically I'm not even getting the correct dimensions of the image at the start. For some reason the width is always 110. Any idea what's going on here? 