Javascript Affecting the Wrong Element

I am setting up a webpage so that it has multiple images on it, and each image has a 50% opacity mask over it. When the mask is moused over, it is supposed to disappear, and then when the mouse leaves the image (below the mask), the mask is supposed to reappear. This worked well when I tested it for one img inside my div, but when I added a second img, the disappear function affected the image with no id, which is confusing me greatly.

HTML:

<div id="images">
    <img id="testimage1" src="url" onmouseover="appear1()"/>
    <img src="url"/>
</div>
<div id="masks">
    <img id="testmask1" src="url" onmouseover="disappear1()"/>
    <img src="url"/> <!-- This is the one that disappears -->
</div>

CSS:

#images{
    position:absolute;
    top:0px;
}
#masks{
    position:absolute;
    top:0px;
}

JS:

function disappear1(){
    //Makes the first test mask disappear. This is a test function.
    document.getElementById("testmask1").style.display = 'none';
}

function appear1(){
    //Makes the first test mask appear. This is a test function.
    document.getElementById("testmask1").style.display = 'block';
}

EDIT: Roko asked why I didn't do this in pure CSS. Aside from the fact that I didn't think about how to configure the images correctly, when I eventually finish this page, I will want to have masks 'linked', where I mouse over one mask and both disappear. I'm not sure that's possible in pure CSS.

EDIT #2: As it turns out, the function was working as written. It was just that because I had a single div for each row of images, when the first image in the row appeared, everything else slid over, thus poor coding on my part.