Q:

JavaScript MouseOver is only working for the first instance in the Velocity #foreach statement

I'm still fairly new to to JavaScript. Sorry in advance. I have some HTML and a Velocity Template Engine #foreach statement to render some html from a database.
The idea is to mouse over the rendered images and get an over. The problem I am having is (I think) with the javascript, is that ONLY the first rendered image is actually getting the overlay. For some reason, all after the first are not.
$(document).ready(function(){

    var amiibo = document.getElementById("amiibo");
    var activeAmiiboID = amiibo.textContent || amiibo.innerText;

    $("#inactive-"+activeAmiiboID).mouseover(function() {
        console.log("#inactive has been moused over / activeAmiiboID: "+ activeAmiiboID);
        $("#active-"+activeAmiiboID).removeClass("is-invisible");
    });

Here is the HTML snippet:
<div class="columns is-multiline">
    <!-- Here are all of the Amiibo -->
    #foreach( $amiibo in $amiibos )
        <div class="column is-one-fifth">
          <div class="amiibo-id is-hidden" id="amiibo">$amiibo.AmiiboID</div>

            <article class="message is-large is-danger">
                <div class="message-header">
                    <p></p>
                    <p>$amiibo.Name</p>
                    <p></p>
                </div>
                <center>   <!-- Amiibo -->
                    <figure class="image has-text-light">
                        <img class="amiibo-image" src="$amiibo.ImageURL" id="inactive-$amiibo.AmiiboID">
                        <!-- Content Over Amiibo -->
                        <figcaption class="overlay is-overlay is-invisible" id="active-$amiibo.AmiiboID">
                            <!-- Background -->
                            <img class="background is-overlay" alt="Mario" src="https://storage.googleapis.com/amiibo/black.png">
                            <div style="height:16px;font-size:16px;">&nbsp;</div>

                            <!-- Buttons -->
                            <div class="tile is-ancestor">

                                <!-- Collected "Mine" (Star) Button -->
                                <div class="tile is-parent">
                                    <article class="tile is-child">
                                        <div class="star">
                                            <label>
                                                <span class="fa-stack">
                                                    <i class="fas fa-star fa-2x"></i>
                                                    <h4 class="subtitle is-5 has-text-light is-bold">Mine</h4>
                                                    <input class="mine is-hidden" type="checkbox" id="mine">
                                                </span>
                                            </label>
                                        </div>
                                    </article>
                                </div>
                                <!-- Collected "Love" (Heart) Button -->
                                <div class="tile is-parent">
                                    <article class="tile is-child">
                                        <div class="heart">
                                            <label>
                                                <span class="fa-stack">
                                                    <i class="fas fa-heart fa-2x"></i>
                                                    <h4 class="subtitle is-5 has-text-light is-bold">Love</h4>
                                                    <input class="love is-hidden" type="checkbox" id="love">
                                                </span>
                                            </label>
                                        </div>
                                    </article>
                                </div>
                                <!-- Collected "Want" (Gem) Button -->
                                <div class="tile is-parent">
                                    <article class="tile is-child">
                                        <div class="gem">
                                            <label>
                                                <span class="fa-stack">
                                                    <i class="fas fa-gem fa-2x"></i>
                                                    <h4 class="subtitle is-5 has-text-light is-bold">Want</h4>
                                                    <input class="want is-hidden" type="checkbox" id="want">
                                                </span>
                                            </label>
                                        </div>
                                    </article>
                                </div>

                        </figcaption>
                    </figure>
                </center>
            </article>
        </div>
    #end
</div>

What am I doing wrong? Any help or guidance is greatly appreciated. 
Travis W.

A:

The current result is expected because now you only target the image with the current activeAmiiboID. You should target all images by class like this to get the functionality you want:
$(document).ready(function(){

    $('.amiibo-image').mouseover(function() {
        var imgId = $(this).attr('id');
        var id = imgId.split('-')[1];
        $("#active-"+ id).removeClass("is-invisible");
    });
});

