How can I add an element class with javascript?

I need your help! this is some kind of photo gallery 🙂 I want to add this .active class on panels when I click on it. Can anyone teach me how to do that with traditional functions? It only works on just one element 🙁

var panels = document.querySelectorAll(".panel");
console.log(panels);

for (var i = 0; i < panels.length; i++) {
  panels[i].addEventListener("click", function() {
    var panelClassName = this.className;
    addClass(panelClassName);
  });
}

function addClass(currentPanel) {
  var activePanel = document.querySelector("." + currentPanel);
  activePanel.classList.add("active");
}
<div class="container">
  <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_1280.jpg)">

    <h3>Explore the world</h3>
  </div>
  <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636_1280.jpg)">

    <h3>Elephant</h3>
  </div>
  <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_1280.jpg)">

    <h3>Lake</h3>
  </div>
  <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg)">

    <h3>Jungle</h3>
  </div>
  <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg)">

    <h3>Forest</h3>
  </div>

</div>

Answer

The main approach is to have a function to remove active class to all active panels before add this class into click event target. You can check the code here:

https://jsfiddle.net/p8sr453o/6/

function removeActiveClass() {
  const div = document.querySelector('.panel.active');
  div && div.classList.remove('active');
}

function addActiveClass(target) {
  target.classList.add("active");
}

function addClass(event) {
  removeActiveClass();
  addActiveClass(event.currentTarget);
}

var panels = document.querySelectorAll(".panel");
console.log(panels);
for (var panel of panels) {
  panel.addEventListener("click", addClass);
}
.panel {
  color: lightblue;
}

.panel.active {
  color: red;
}
<div class="container">
  <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_1280.jpg)">

    <h3>Explore the world</h3>
  </div>
  <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636_1280.jpg)">

    <h3>Elephant</h3>
  </div>
  <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_1280.jpg)">

    <h3>Lake</h3>
  </div>
  <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg)">

    <h3>Jungle</h3>
  </div>
  <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg)">
    <h3>Forest</h3>
  </div>
</div>