For example, I pick a Photo and have the index of this photo from array. Now I need to put this index ( key) in Content Css. It must be alive if I get. And yes I named my photos 0 1 2 3. So pls help if you have more advance. thx

const images = ['img1', 'img2', 'img3', 'img4', ];
const photoOut = document.querySelector('.photos');
for (let key in images) {
  let img = document.createElement('img');
  img.setAttribute('data-key', key);
  img.src = 'img/' + key + '.png';
  photoOut.append(img);
}

   let messageAfter = document.querySelector('.message')
photoOut.addEventListener('click', showIndex);
function showIndex(event){
const key = event.target.dataset['key'];
console.log(key);

photoOut.addEventListener('click', function (changeIndex) {
    changeIndex.target.setAttribute('data-after', '3');
});
if (key === undefined) {
    return true;
}

}
```
```
.message:after {
  content: attr(data-after);
  background-color: #FFC200;
  position: absolute;
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  color: black;
  right: -20px;
  top: 0;
  text-align: center;
  line-height: 25px;
  font-size: 13px;
  font-weight: bold;
}
```
```
<div class="left-block-menu">
  <p class="gauzy">MENU</p><br>
  <p>Home</p><br>
  <p>My Tasks</p><br>
  <p class="message">Notifications</p><br>
</div>
```