Add unique numbers and letters to 3 diffirent image hotspots on the same page

Hello,

I would like to add unique numbers and letters to 3 diffirent image hotspots on the same page. I managed to change the numbers via a CSS code I found in several topics but it changes the content in all 3 images. It’s because the div class in these hotspot image element has the same name I think. Should I create a unique class name inside the element for each image? Can someone help me with this? I would like to use these images for a floorplan of a business building with 3 floors. But all hotspots in 3 images needs a unique number or letter.

What I need is this:

Hotspot Image 1
– 21A, 21B, C, 0, 1

Hotspot Image 2
– D, E, F, G, H, I, J, 2, 3

Hotspot Image 3
– K, L, M, N, O, P, Q, R, 4, 5

——————————
This is what I tried but it changes in all 3 images.

.avia-builder-el-21 .av-hotspot-container-inner-wrap > .av-image-hotspot:nth-child(1) .av-image-hotspot_inner::after {
content: “1”;
}