let pictures = [
  "dounat-1",
  "dounat-2",
  "dounat-3",
  "dounat-4",
  "dounat-5",
  "dounat-6"
];

let container = document.getElementsByClassName("container__item-second");
let third = document.querySelectorAll(".container__item-third");

let fir = document.getElementById("1");
let sec = document.getElementById("2");
let thi = document.getElementById("3");
let fort = document.getElementById("4");
let fif = document.getElementById("5");
let six = document.getElementById("6");

fir.addEventListener("click", function() {
  changeButton(
    document.getElementById("7"),
    document.getElementById("13"),
    pictures[0]
  );
});
sec.addEventListener("click", function() {
  changeButton(
    document.getElementById("8"),
    document.getElementById("14"),
    pictures[1]
  );
});
thi.addEventListener("click", function() {
  changeButton(
    document.getElementById("9"),
    document.getElementById("15"),
    pictures[2]
  );
});
fort.addEventListener("click", function() {
  changeButton(
    document.getElementById("10"),
    document.getElementById("16"),
    pictures[3]
  );
});
fif.addEventListener("click", function() {
  changeButton(
    document.getElementById("11"),
    document.getElementById("17"),
    pictures[4]
  );
});
six.addEventListener("click", function() {
  changeButton(
    document.getElementById("12"),
    document.getElementById("18"),
    pictures[5]
  );
});

function changeButton(idImg, idParagraf, img) {
  if (idImg.getAttribute("src") == "img/donut.png") {
    for (let i = 0; i < third.length; i++) {
      console.log(third[i].className);

      third[i].style = "display: none";
    }
    idImg.src = "img/" + img + ".jpg";
    idParagraf.style = "display: block";
    idParagraf.className = "container__item-third__visible";

    // let sib = this.nextElementSibling
    //sib.src="img/donut.png"
  } else {
    idImg.src = "img/donut.png";
    idParagraf.setAttribute("class", "container__item-third");
  }
}