I have a basic setup that is working but for one issue I am struggling with.

I have multiple videos (using just 2 for testing) that when each is hovered over, it will play. So far, so good. I also have a div overlay with a play button (.tnplay) that is supposed to get hidden on rollover. The issue is the way I am trying to hide the div.tnplay on rollover. I need to hide just the one on the target video and right now, all are being hidden, since they are the same class.

How would I go about targeting just the .tnplay div related to the specific video?
This is the jQuery I am struggling with:

```
var tn = $(".tnplay");
var v = $(".thevideo");
//check if video is ready to play
$(v).on('canplay', function() {
  $(v).mouseenter(function() {
    $(this).get(0).play();
    $(tn).hide();
  })
  .mouseleave(function(){
    $(this).get(0).pause();
    $(tn).show();
    $(this).get(0).currentTime=0;
  })
});

```

Here is my working example: <https://codepen.io/darksoundlab/pen/XWJZeRX>

Thanks for any help. You all are awesome!