All my code is being overwritten by the last section
<p>We have a map which uses polygons to create overlays on top of countries. When a user hovers over a country the polygons change color.</p>

<p>When the mouse leave the country it changes back (or at least we want it to)</p>

<p>Us the code below what happens is that that both countries access the settings for JUST the last section of code. It seems all other code is overwritten.</p>

<p>I don't know which variable to make unique.</p>

<pre><code>for(var i = 0; i &lt; germany.length; i++){
    addListener( germany[ i ], germany );
    }
function addListener( germany_item, tweened )
{   
    google.maps.event.addListener(germany_item, "mouseover",function() {
                    for( var i in tweened ) 
        tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" });
    });
    google.maps.event.addListener(germany_item, "mouseout",function() {
                    for( var i in tweened ) 
        tweened[ i ].setOptions({ fillColor: "#5EA9BD", strokeColor: "#5EA9BD" });
    });
}//
for(var i = 0; i &lt; france.length; i++){
    addListener( france[ i ], france );
    }
function addListener( france_item, tweened )
{   
    google.maps.event.addListener(france_item, "mouseover",function() {
                    for( var i in tweened ) 
        tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" });
        });
    google.maps.event.addListener(france_item, "mouseout",function() {    
                    for( var i in tweened ) 
            tweened[ i ].setOptions({ fillColor: "#006886", strokeColor: "#006886" });
        });
</code></pre>
