When the image is clicked, I want it to change to another image and get pushed to the top
After it's clicked and image 2 appears it returns back to image 1 and get pushed back to the bottom
this is my code so far
function marioAnimation() {
var i = true;
var image = document.getElementById("mario1");
if (i) {
document.getElementById("mario1").src = "/mario2.png";
image.style.marginTop = '10px';
var x = false;
} else {
document.getElementById("mario1").src = "/mario1.png";
}
}<section id="section1">
<div class="container">
<img class="image" src="/mario1.png" alt="" id="mario1" onclick="marioAnimation()" style="margin-top: 50px;">
</div>
</section>