Javascript-форум - Привязка каждого изображения к своей кнопке

Всем привет!
Проходя курс по js столкнулся с таким заданием: через js под каждым изображением на странице сайта необходимо создать кнопку, которая бы по клику срывала то изображение, под которым она находится.
Прилепить кнопку под изображение у меня получилось, но беда в том, что на какую бы кнопку я не нажимал, исчезают все изображения и до меня никак не дойдет, каким образом должен я связать каждое изображение со своей кнопкой. Менять что либо в самом HTML коде нельзя, только через JS, использование jQuery тоже запрещено.
Помогите пожалуйста.Уже неделю сижу с этим заданием.((

P.S курс на нидерландском языке, так что пусть вас не смущает тарабарщина в HTML коде)

JS:

window=onload = function() {

//-----BUTTON   
var nDD = document.getElementsByClassName('toggle');
var y = nDD.length;
for(var i = 0; i <= y; i++){
var eItem = document.createElement("BUTTON");
eItem.className = "button";
var sTekst = document.createTextNode('скрыть');
eItem.appendChild(sTekst);
nDD[i].appendChild(eItem);

//-----прячем IMG
 eItem.onclick = function() {
    var x = document.getElementsByClassName('screenshot');
    for (var i = 0; i < x.length; i++){
    if (x[i].style.display === "none") {
        x[i].style.display = "block";
    } else {
        x[i].style.display = "none";
    }
    }
}
}  
}

HTML:

<dl>
    <dt>Site &ndash; Manage Sites - New:</dt>
    <dd>de Wizard Site definition verschijnt, je beantwoordt een aantal vragen
      <div class="toggle"><img class="screenshot" width="238" height="222" src="images/clip_image014.gif" alt="schermafdruk"></div>
    </dd>
    <dt> &ldquo;Hoe wil u de website noemen?&rdquo; </dt>
    <dd>vul in <i> George&rsquo;s site</i>
      <div class="toggle"><img class="screenshot" width="310" height="307" src="images/clip_image002.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> &ldquo;Wil u Server technologie gebruiken?&rdquo;</dt>
    <dd> Neen, ga verder
      <div class="toggle"><img class="screenshot" width="407" height="175" src="images/clip_image004.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> &ldquo;Hoe wil u tewerk gaan met de bestanden?&rdquo; </dt>
    <dd>kies voor <i>Ik wil de bestanden lokaal bewerken en dan uploaden naar de server (aangeraden)</i> </dd>
    <dt>&rdquo;Waar wil u de bestanden lokaal opslaan?</dt>
    <dd>Op <i>C:\My Documents\George\George&rsquo;s site </i>(wordt automatisch ingevuld)
      <div class="toggle"><img class="screenshot" width="487" height="294" src="images/clip_image006.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> &ldquo;Hoe wil u de bestanden kopi&euml;ren naar de Remote Server?&rdquo;</dt>
    <dd>kies voor <i>Local/Network</i></dd>
    <dt>&rdquo;In welke map op die server wil u de bestanden kopi&euml;ren?&rdquo;</dt>
    <dd>Op <i>\\Server2\cursisten\Daikin\George\</i>
      <div class="toggle"><img class="screenshot" width="494" height="246" src="images/clip_image008.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> &ldquo;Wilt u &lsquo;check in&lsquo; en &lsquo;check out&rsquo; activeren?&rdquo; </dt>
    <dd><i>Neen</i>, ga verder
      <div class="toggle"><img class="screenshot" width="407" height="175" src="images/clip_image010.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> U bent klaar: de opsomming van al deze instellingen verschijnt</dt>
    <dd>klik <i>Done</i> als u klaar bent
      <div class="toggle"><img class="screenshot" width="422" height="418" src="images/clip_image012.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> U ziet de lijst van websites die je reeds maakte, </dt>
    <dd>klik opnieuw <i>Done</i>
      <div class="toggle"><img class="screenshot" width="238" height="222" src="images/clip_image014.gif" alt="schermafdruk"> </div>
    </dd>
    <dt>Eenmaal een site gemaakt, heb je een overzicht van alle bestanden ervan in het<i> Files Panel</i> </dt>
    <dd>De figuur hieronder toont de toestand van een afgewerkte site.
      <div class="toggle"><img class="screenshot" width="216" height="313" src="images/clip_image016.gif" alt="schermafdruk"> </div>
    </dd>
  </dl>

<img src="" alt="картинка 1"> <img src="" alt="картинка 2"> <img src="" alt="картинка 3"><br> <button>кнопка 1</button> <button>кнопка 2</button> <button>кнопка 3</button> <script> var img = document.querySelectorAll('img'); document.querySelectorAll('button').forEach((el,i)=>el.onclick=e=>img[i].style.display= img[i].style.display == 'none'?'inline':'none'); </script>

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script> window=onload = function() { //-----BUTTON var nDD = document.getElementsByClassName('screenshot'); var y = nDD.length; for(var i = 0; i < y; i++){ var eItem = document.createElement("BUTTON"); eItem.className = "button"; eItem.dataset.i = i; var sTekst = document.createTextNode('скрыть'); eItem.appendChild(sTekst); nDD[i].parentNode.appendChild(eItem); //-----прячем IMG eItem.onclick = function() { var i = this.dataset.i; var img = nDD[i]; img.style.display = img.style.display ? "" : "none"; this.textContent = img.style.display ? "показать" : "скрыть"; } } } </script> </head> <body> <dl> <dt>Site – Manage Sites - New:</dt> <dd>de Wizard Site definition verschijnt, je beantwoordt een aantal vragen <div class="toggle"><img class="screenshot" width="238" height="222" src="images/clip_image014.gif" alt="schermafdruk"></div> </dd> <dt> “Hoe wil u de website noemen?” </dt> <dd>vul in <i> George’s site</i> <div class="toggle"><img class="screenshot" width="310" height="307" src="images/clip_image002.gif" alt="schermafdruk"> </div> </dd> <dt> “Wil u Server technologie gebruiken?”</dt> <dd> Neen, ga verder <div class="toggle"><img class="screenshot" width="407" height="175" src="images/clip_image004.gif" alt="schermafdruk"> </div> </dd> <dt> “Hoe wil u tewerk gaan met de bestanden?” </dt> <dd>kies voor <i>Ik wil de bestanden lokaal bewerken en dan uploaden naar de server (aangeraden)</i> </dd> <dt>”Waar wil u de bestanden lokaal opslaan?</dt> <dd>Op <i>C:\My Documents\George\George’s site </i>(wordt automatisch ingevuld) <div class="toggle"><img class="screenshot" width="487" height="294" src="images/clip_image006.gif" alt="schermafdruk"> </div> </dd> <dt> “Hoe wil u de bestanden kopiëren naar de Remote Server?”</dt> <dd>kies voor <i>Local/Network</i></dd> <dt>”In welke map op die server wil u de bestanden kopiëren?”</dt> <dd>Op <i>\\Server2\cursisten\Daikin\George\</i> <div class="toggle"><img class="screenshot" width="494" height="246" src="images/clip_image008.gif" alt="schermafdruk"> </div> </dd> <dt> “Wilt u ‘check in‘ en ‘check out’ activeren?” </dt> <dd><i>Neen</i>, ga verder <div class="toggle"><img class="screenshot" width="407" height="175" src="images/clip_image010.gif" alt="schermafdruk"> </div> </dd> <dt> U bent klaar: de opsomming van al deze instellingen verschijnt</dt> <dd>klik <i>Done</i> als u klaar bent <div class="toggle"><img class="screenshot" width="422" height="418" src="images/clip_image012.gif" alt="schermafdruk"> </div> </dd> <dt> U ziet de lijst van websites die je reeds maakte, </dt> <dd>klik opnieuw <i>Done</i> <div class="toggle"><img class="screenshot" width="238" height="222" src="images/clip_image014.gif" alt="schermafdruk"> </div> </dd> <dt>Eenmaal een site gemaakt, heb je een overzicht van alle bestanden ervan in het<i> Files Panel</i> </dt> <dd>De figuur hieronder toont de toestand van een afgewerkte site. <div class="toggle"><img class="screenshot" width="216" height="313" src="images/clip_image016.gif" alt="schermafdruk"> </div> </dd> </dl> </body> </html>