Jquery show text on hover - Looped Item

I am needing to show text for an icon when it is hovered on. The issue is the icons are displaying via a loop. Meaning I have more than one icon with the same name. I'm sure I need to use "this" somehow to only show text next to the icon that is hovered on. However so far I have failed to do so.

My basic code so far. How would I change the code to show text depending on which icon is being hovered on?

$(".material-icons").on({
        mouseenter: function () {
         console.log('Show Name for this Icon')
        },
        mouseleave: function () {
         console.log('Hide Name for this Icon')
        }
    });

Any help is appreciated!

Edit: Here is the loop that's being used to show the icons.

   <li id='topSection' class="list-group-item active">Amenities </li>
             <li id="amnetiesBox" class="list-group-item">
              <% for(var i=0; i<rentals.amenities.length; i++){ %>
              <i class="material-icons"><%=rentals.amenities[i]%></i>
               <% } %>
            </li>
              </li> 

An example of the icons being selected:

<input type="checkbox" name="amenities" value="personal_video"><span>TV</span>
<input type="checkbox" name="amenities" value="call"><span>Phone</span>