Если картинок на каждой странице (или у вас одна страница) одинаковое количество и не надо будет ничего менять, то
Всем картинкам пишем
<img data-number="1">
Цифру меняем прямо в html
а в css пишем

img {
  postition: relative;
}
img:hover::after {
  position: absolute;
  /* top right подстроите сами под правый верхний угол*/
  content: attr(data-number);
}

Если лень выставлять все номера в вёрстке, то используем счётчик на чистом CSS 3

/*Блок, в котором все ваши картинки (если такого нет пишите body)*/
.img-container {
  counter-reset: imageNum; /* вместо imageNum можно любое название на латинице*/
}
/*Все ваши картинки*/
img {
  counter-increment: imageNum; /*Имя счётчика должно совпадать*/
}
/* Выводим так же*/
img:hover::after {
  position: absolute;
  /* top right подстроите сами под правый верхний угол*/
  content: counter(imageNum); /*Имя счётчика должно совпадать*/
}

Готово, если не сработает:
htmlbook.ru/blog/nachinaem-rabotat-s-css-schyotchikami

mystring = "20200503_2525"
if "20200503_ " in mystring:
   # Ваш код

Зачем iQuerry?
<div class="progress_bar"></div>

.progress_bar {
    width: 100%;
    height: 10px;
    border: 1px solid gray;
    border-radius: 50px;
}

let bought = 100;
let vip = 250;
let progressBar = document.querySelector('.progress_bar');
progressBar.style.background = `linear-gradient(to right, rgb(29,170,232) ${bought/vip*100}%, white ${bought/vip*100}%)`