I cannot display images when I click on the target. I have nine images and I need to display them as soon as I click on images.

const btns = document.querySelectorAll('.btn-modale');

const modaleEquipement = document.querySelector('.bloc-modale');

const fermetureModale = document.querySelector('.fermeture-modale');

const imgIndex = document.querySelector('.bloc-modale img');


btns.forEach(btn => {

    btn.addEventListener('click', (e) => {

        imgIndex.src = `ressources/img${e.target.getAttribute('data-index')}-equip.jpg`;
        modaleEquipement.classList.add('active-modale');

    });

});

<button type="button" data-index="1" class="btn-modale"></button> 
<button type="button" data-index="2" class="btn-modale"></button>
<button type="button" data-index="3" class="btn-modale"></button>
<button type="button" data-index="4" class="btn-modale"></button>
<button type="button" data-index="5" class="btn-modale"></button>
<button type="button" data-index="6" class="btn-modale"></button>
<button type="button" data-index="7" class="btn-modale"></button>
<button type="button" data-index="8" class="btn-modale"></button>
<button type="button" data-index="9" class="btn-modale"></button>