first time post here. a beginner.

What I'm trying to do here is that:

I'm trying to display an image of a silhouette of a person. And with every click, the current image fades out and another image of the same person (different position/location) fades in. kind of like an animation except very bare bones.

I made a variable that supposedly controls when certain images fade in or out(var currentscene).The button that calls the function covers the entire page and is invisible because I want the animation to move frame by frame with a click anywhere from the page.

('stand' is an image of a boy standing and 'sit' is an image of a boy sitting) edit: in the example it becomes squareblue and squarered.

(fade-in and fade-out are classes that I add to the image so the transition triggers)

And yet the problem is that a single click will fade in both pictures, as if the number on the variable (currentscene) doesn't matter or the onclick event registered infinite number of clicks or something like that.

Im trying to make the blue square fade in on the first click and the blue fade out and the red fade in on the second click of the button.

If there is a fix to this that would be helpful. If there is a whole another way to do what I'm trying to accomplish, I'm all ears. Although I've tried looking into arrays and EventListeners but I haven't been successful.

heres a recreation of the problem:

var currentscene = 0;

function next() {
  currentscene++;
  if (currentscene = 1) {
    var element = document.getElementById("blue");
    element.classList.add("fade-in");
  }
  if (currentscene = 2) {
    var element = document.getElementById("blue");
    element.classList.add("fade-out");

    var element = document.getElementById("red");
    element.classList.add("fade-in");
  }
}

.squareblue {
  height: 50px;
  width: 50px;
  top: 50px;
  background-color: blue;
  position: absolute;
  opacity: 0;
  animation-fill-mode: forwards;
}

.squarered {
  height: 50px;
  width: 50px;
  top: 100px;
  background-color: red;
  position: absolute;
  opacity: 0;
  animation-fill-mode: forwards;
}

.fade-out {
  animation: fadeOut ease 2s
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fade-in {
  animation: fadeIn ease 2s
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div2 id="blue" class="squareblue"></div2>
<div2 id="red" class="squarered"></div2>

<button class="button" onclick="next()">next</button>