Multiple popup windows - information is the same in all of them

Question

I have a problem with my modals. I'm creating my first portfolio website using js and the popup window is not working as I expect.

Everything works fine, only when I open the portfolio item and click "project details" each popup window has the same information about the item. Project name, category etc. do not change. What could be the problem? I will be grateful for your help.

and JavaScript, HTML and CSS:

const filterContainer = document.querySelector(".portfolio-filter"),
  portfolioItemsContainer = document.querySelector(".portfolio-items"),
  portfolioItems = document.querySelectorAll(".portfolio-item"),
  popup = document.querySelector(".portfolio-popup"),
  prevBtn = popup.querySelector(".pp-prev"),
  nextBtn = popup.querySelector(".pp-next"),
  closeBtn = popup.querySelector(".pp-close"),
  projectDetailsContainer = popup.querySelector(".pp-details"),
  projectDetailsBtn = popup.querySelector(".pp-project-details-btn");
let itemIndex, slideIndex, screenshots;

/* filter portfolio items*/
filterContainer.addEventListener("click", (event) => {
  if (event.target.classList.contains("filter-item") &&
    !event.target.classList.contains("active")) {
    filterContainer.querySelector(".active").classList.remove("outer-shadow",
      "active");
    event.target.classList.add("active", "outer-shadow");
    const target = event.target.getAttribute("data-target");
    portfolioItems.forEach((item) => {
      if (target == item.getAttribute("data-category") || target === 'all') {
        item.classList.remove("hide");
        item.classList.add("show");
      } else {
        item.classList.remove("show");
        item.classList.add("hide");
      }
    })

  }


})

portfolioItemsContainer.addEventListener("click", (event) => {
  if (event.target.closest(".portfolio-item-inner")) {
    const portfolioItem = event.target.closest(".portfolio-item-inner").
    parentElement;
    itemIndex = Array.from(portfolioItem.parentElement.children).indexOf(
      portfolioItem);
    screenshots = portfolioItems[itemIndex].querySelector(".portfolio-item-img img").getAttribute("data-screenshots");

    screenshots = screenshots.split(",");
    if (screenshots.length === 1) {
      prevBtn.style.display = "none";
      nextBtn.style.display = "none";
    } else {
      prevBtn.style.display = "block";
      nextBtn.style.display = "block";
    }
    slideIndex = 0;
    popupToggle();
    popupSlideshow();
    popupDetails();
  }
})

closeBtn.addEventListener("click", () => {
  popupToggle();
  if (projectDetailsContainer.classList.contains("active")) {
    popupDetails();
  }
})

function popupToggle() {
  popup.classList.toggle("open");
  bodyScrollingToggle();

}

function popupSlideshow() {
  const imgSrc = screenshots[slideIndex];
  const popupImg = popup.querySelector(".pp-img");
  popupImg.src = imgSrc;

  popup.querySelector(".pp-counter").innerHTML = (slideIndex + 1) + " of " +
    screenshots.length;
}


nextBtn.addEventListener("click", () => {
  if (slideIndex === screenshots.length - 1) {
    slideIndex = 0;
  } else {
    slideIndex++;
  }
  popupSlideshow();

})


prevBtn.addEventListener("click", () => {
  if (slideIndex === 0) {
    slideIndex = screenshots.length - 1
  } else {
    slideIndex--;
  }
  popupSlideshow();

})

function popupDetails() {

  if (!portfolioItems[itemIndex].querySelector(".portfolio-item-details")) {
    projectDetailsBtn.style.display = "none";
    return;
  }
  projectDetailsBtn.style.display = "block";
  const details = portfolioItems[itemIndex].querySelector(".portfolio-item-details").innerHTML;
  popup.querySelector(".pp-project-details").innerHTML = details;
  const title = portfolioItems[itemIndex].querySelector(".portfolio-item-title").innerHTML;
  popup.querySelector(".pp-title h2").innerHTML = title;
  const category = portfolioItems[itemIndex].getAttribute("data-category");
  console.log(category);
  popup.querySelector(".pp-project-category").innerHTML = category.split("-").join("-");
}



projectDetailsBtn.addEventListener("click", () => {
  popupDetails();
})



function popupDetails() {
  if (projectDetailsContainer.classList.contains("active")) {
    projectDetailsBtn.querySelector("i").classList.remove("fa-minus");
    projectDetailsBtn.querySelector("i").classList.add("fa-plus");
    projectDetailsContainer.classList.remove("active");
    projectDetailsContainer.style.maxHeight = 0 + "px"
  } else {
    projectDetailsBtn.querySelector("i").classList.remove("fa-plus");
    projectDetailsBtn.querySelector("i").classList.add("fa-minus");
    projectDetailsContainer.classList.add("active");
    projectDetailsContainer.style.maxHeight = projectDetailsContainer.
    scrollHeight + "px";
    popup.scrollTo(0, projectDetailsContainer.offsetTop);
  }


}

@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Montserrat&family=Oooh+Baby&family=Poppins:wght@200;300;400;500;600&display=swap');
:root {
  --bg-black-900: #f2f2fc;
  --bg-black-100: #fdf9ff;
  --bg-black-50: #e8dfec;
  --text-black-900: #302e4d;
  --text-black-700: #504e70;
  --outer-shadow: 3px 3px 3px #d0d0d0, -3px -3px 3px #f8f8f8;
  --outer-shadow-0: 0 0 0 #d0d0d0, 0 0 0 #f8f8f8;
  --inner-shadow: inset 3px 3px 3px #d0d0d0, inset -3px -3px 3px #f8f8f8;
  --bg-opacity: rgba(255, 255, 255, 0.5);
}

.padd-10 {
  padding-bottom: 30px;
}

body {
  line-height: 1.5;
  font-size: 16px;
  font-family: 'Poppins' sans-serif;
}

body.stop-scrolling {
  overflow-y: hidden;
}

* {
  margin: 0;
  padding: 0;
  outline: none;
  text-decoration: none;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

::before,
 ::after {
  box-sizing: border-box;
}

ul {
  list-style: none;
}

.section {
  background: var(--bg-black-900);
  min-height: 100vh;
  display: block;
  padding: 0 30px;
  opacity: 1;
}

.hidden {
  display: none !important;
}

.padd-15 {
  padding-left: 15px;
  padding-right: 15px;
}

.container {
  max-width: 1100px;
  width: 100%;
  margin: auto;
}

.containerr {
  max-width: 1100px;
  width: 100%;
  margin: auto;
}

.section .containerr {
  padding-top: 100px;
  padding-bottom: 70px;
}

.section .container {
  padding-top: 60px;
  padding-bottom: 70px;
}

.section-title {
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 60px;
}

.section-title h2 {
  font-size: 40px;
  color: var(--text-black-900);
  font-weight: 700;
  position: relative;
}

.section-title h2::before {
  content: '';
  height: 4px;
  width: 50px;
  background-color: var(--skin-color);
  position: absolute;
  top: 100%;
  left: 0;
}

.section-title h2::after {
  content: '';
  height: 4px;
  width: 25px;
  background-color: var(--skin-color);
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
  position: relative;
}


/* portfolio */

.portfolio .portfolio-filter {
  padding: 0 15px;
  flex: 0 0 100%;
  max-width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

.portfolio .section-title {
  margin-bottom: 40px;
}

.portfolio .filter-item {
  display: inline-block;
  margin: 0 5px 10px;
  padding: 5px 10px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-black-700);
  text-transform: capitalize;
  font-size: 16px;
  transition: all 0.3s ease;
}

.portfolio .filter-item:hover:not(.active) {
  opacity: 0.6;
}

.portfolio .filter-item.active {
  color: var(--skin-color);
}

.portfolio .portfolio-item {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
}

.portfolio .portfolio-item-inner {
  padding: 15px;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}

.portfolio .portfolio-item-details {
  display: none;
}

.portfolio img {
  border-radius: 5px;
  width: 100%;
  transition: all 0.3s ease;
}

.portfolioo-item-img {
  position: relative;
}

.portfolio .portfolio-item.hide {
  display: none;
}

.portfolio .portfolio-item.show {
  display: block;
  animation: fadeInTop 0.5s ease;
}

.portfolio .view-project {
  text-transform: capitalize;
  font-size: 16px;
  font-weight: 500;
  color: var(--skin-color);
  display: flex;
  z-index: -1;
  opacity: 0;
}

.portfolio-item-title {
  margin-top: -18px;
}

.portfolio .portfolio-item-inner:hover img {
  transform: translateY(-23px);
}

.portfolio .portfolio-item-inner:hover .view-project {
  transform: translateY(-23px);
  transition: all 0.3s ease;
  opacity: 1;
}

.portfolio .portfolio-item-inner p {
  font-size: 16px;
  color: var(--text-black-700);
  text-transform: capitalize;
}

.btn1 {
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-black-900);
  cursor: pointer;
  padding: 0 15px;
  top: 15px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.btn1:hover {
  color: var(--skin-color);
  cursor: pointer;
}

.nacisk {}


/*portfolio popup*/

.portfolio-popup {
  background-color: var(--bg-black-900);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  overflow-y: scroll;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.portfolio-popup.open {
  visibility: visible;
  opacity: 1;
}

.portfolio-popup .pp-details {
  max-width: 1350px;
  width: calc(85% + 30px);
  margin: auto;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease;
}

.portfolio-popup .pp-details.active {
  opacity: 1;
}

.portfolio-popup .pp-title {
  padding: 0 15px;
}

.portfolio-popup .pp-title h2 {
  font-size: 28px;
  color: var(--text-black-900);
  text-transform: capitalize;
  font-weight: 600;
  margin: 0 0 5px;
}

.portfolio-popup .pp-title p {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-black-700);
  margin: 0 0 15px;
  border-bottom: 1px solid rgb(230, 228, 228);
  padding-bottom: 10px;
}

.portfolio-popup .pp-title p span {
  font-weight: 400;
  text-transform: capitalize;
}

.portfolio-popup .pp-details-inner {
  padding: 30px 0;
}

.portfolio-popup .pp-project-details h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-black-700);
  margin: 0 0 15px;
  text-transform: capitalize;
}

.portfolio-popup .description p {
  font-size: 16px;
  color: var(--text-black-700);
  line-height: 26px;
  margin: 0;
}

.portfolio-popup .description {
  flex: 0 0 65%;
  max-width: 65%;
  padding: 0 15px;
}

.portfolio-popup .info {
  flex: 0 0 35%;
  max-width: 35%;
  padding: 0 50px;
}

.portfolio-popup .info ul li {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 16px;
}

.portfolio-popup .info ul li span {
  font-weight: 400;
}

.portfolio-popup .info ul li a {
  color: var(--skin-color);
}

.portfolio-popup .info ul li:last-child {
  margin-bottom: 0;
}

.portfolio-popup .separator {
  height: 1px;
  width: 100%;
  display: block;
  background-color: rgb(230, 228, 228);
}

.portfolio-popup .pp-img {
  max-width: 100%;
  width: auto;
  height: auto;
  padding: 10px;
  border-radius: 5px;
}

.portfolio-popup .pp-main {
  min-height: 100vh;
  max-width: 1350px;
  width: 85%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-popup .pp-main-inner {
  padding: 70px 0 50px;
  position: relative;
}

.portfolio-popup .pp-project-details-btn {
  position: absolute;
  left: 0;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-black-900);
  cursor: pointer;
  padding: 0 15px;
  top: 15px;
  height: 40px;
  line-height: 40px;
}

.portfolio-popup .pp-project-details-btn:hover {
  color: var(--skin-color);
}

.portfolio-popup .pp-project-details-btn i {
  margin-left: 5px;
}

.portfolio-popup .pp-close {
  position: absolute;
  right: 0;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 35px;
  height: 40px;
  width: 40px;
  top: 15px;
  color: var(--text-black-900);
  cursor: pointer;
}

.portfolio-popup .pp-close:hover {
  color: var(--skin-color);
}

.portfolio-popup .pp-counter {
  position: absolute;
  right: 0;
  height: 40px;
  line-height: 40px;
  bottom: 5px;
  font-size: 16px;
  color: var(--text-black-700);
}

.portfolio-popup .pp-prev,
.portfolio-popup .pp-next {
  position: fixed;
  top: 50%;
  height: 40px;
  width: 40px;
  cursor: pointer;
  text-align: center;
  font-size: 20px;
  z-index: 1010;
  color: var(--text-black-900);
  opacity: 0.6;
}

.portfolio-popup .pp-prev:hover,
.portfolio-popup .pp-next:hover {
  opacity: 1;
}

.portfolio-popup .pp-prev i,
.portfolio-popup .pp-next i {
  line-height: 40px;
}

.portfolio-popup .pp-prev i {
  transform: rotate(180deg);
}

.portfolio-popup .pp-prev {
  left: 15px;
}

.portfolio-popup .pp-next {
  right: 15px;
}





  
  
  
  Bartek Lisowski
  
  
  
  



  
  

    
    
      
        
          
            Portfolio
          
        
        
          
            My Last Projects : 
          
          
            All
            web-application
            photoshop
            mobile app
            e commerce

          
        
        
        
          
          
            
              
                
                
                view project
              
              Web designs
              
              
                
                  
                    Project Brief:
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel consequatur rem libero similique quam ipsa facere porro voluptatum, hic in nulla natus nemo itaque? Cupiditate iusto cum sequi adipisci doloribus?

                    
                  
                  
                    Project info
                    
                      Date - 2020
                      Client - xyz
                      Tools - html, css, js
                      Web - www.domain.com
                    
                  
                
              
              

            
          
          
          
          
            
              
                
                
                view project
              
              Photosho Projects
              
              
                
                  
                    Project Brief:
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel consequatur rem libero similique quam ipsa facere porro voluptatum, hic in nulla natus nemo itaque? Cupiditate iusto cum sequi adipisci doloribus?

                    
                  
                  
                    Project info
                    
                      Date - 2020
                      Client - xyz
                      Tools - html, css, js
                      Web - www.domain.com
                    
                  
                
              
              

            
          
          

        



          

          
        

    
    
    
      
        
          
            personal portfolio
            Category - Web Application
          
          
            
              
                Project Brief:
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel consequatur rem libero similique quam ipsa facere porro voluptatum, hic in nulla natus nemo itaque? Cupiditate iusto cum sequi adipisci doloribus?

                
              
              
                Project info
                
                  Date - 2020
                  Client - xyz
                  Tools - html, css, js
                  Web - www.domain.com
                
              
            
          
        
      
      

      
      
        
          Project Detils 
          ×
          
          1 of 6

Multiple popup windows - information is the same in all of them

0 Answers