Change image on post title hover (more than one instance) – Jquery

I created a loop of posts from terms having a block for each term like the following:

Term title

Featured image of one post from that term

List of all posts for that term

Right now I’m using 3 terms so it’s 3 blocks with that content. The idea is that when you hover the title of one of the posts from a term, the featured image changes to the one from the post hovered.

It is (kind of) working but when I hover a post title, all images change instead of just the one in the block they belong to. I think it is because I somehow need to use unique ID’s instead of classes for the Jquery but I don’t know how to translate the ID to the Jquery (I’m learning to code in the process of building things)

PHP Code


I found how to use variable for the ID in the jquery, but now the jquery is only working on the first img instance. No matter what link I hover into, the image changes but at the first image….

New Jquery code:

(any other advice on cleaning up code, or better approaches are appreciated. I’m learning and this weird query is the best approach to what I was trying to do lol)