You have two elements with same id so when you add an event listener using ID selector, javascript cannot handle such a thing because you are supposed to have each ID only once in HTML pages. Try to change your selector and also change IDs.

First you need to remove the existing class and add a new class to it. You have added a class first with the existing one so it will get appended and after you are trying to remove that class “imageone” which will not get removed. So try removing imageone first and add the move class. Provide an Id to an img element and do something like this.

$(document).ready(function() {
  $('#profile').click(function() {
  $('#imageone').removeClass('imageone');
  $('#imageone').addClass('move');
  })

  $('#back').click(function() {
  $('#imageone').removeClass('move');
  $('#imageone').addClass('goback');
  })
 })

plz try this code..

$(document).ready(function() {
  $('#profile').click(function() {
    $('.imageone').addClass('move');
    $('.imageone').removeClass('goback');
  });

  $('#back').click(function() {
    $('.imageone').removeClass('move');
    $('.imageone').addClass('goback');
  });
});

I made a button that when I pressed it, it will add a class with animation into the image. I made another button and I want to add another class to the image which will revert the image back to its original size. But the second class is not adding into it, I’ve tried to remove the previous class but it’s unremovable after adding into image.

Any way to add the second class into the image?

$(document).ready(function() {
  $('#profile').click(function() {
    $('.imageone').addClass('move');
    $('.imageone').removeClass('imageone');
  })

  $('#back').click(function() {
    $('.imageone').removeClass('move');
    $('.imageone').addClass('goback');
  })
})

.move {
  animation: scale 1s ease-in-out forwards;
  z-index: -1;
}

@keyframes scale {
  from {
    position: relative;
    z-index: -1;
    bottom: 0pt;
  }
  to {
    position: relative;
    bottom: -142pt;
    transform: scale(1.16, 1.23);
    left: 0pt;
    z-index: -1;
    transform-origin: bottom right;
  }
}

.goback {
  animation: goback 1s ease-in-out forwards;
  z-index: -1;
}

@keyframes goback {
  from {
    position: relative;
    bottom: -142pt;
    transform: scale(1.16, 1.23);
    left: 0pt;
    z-index: -1;
    transform-origin: bottom right;
  }
  to {
    position: relative;
    z-index: -1;
    bottom: 0pt;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pageone">
  <img src="images.png" class="imageone" alt="liam">
</div>
<div id="textprofile">
  <a href="#" class="button" id="border">
    <p id="profile">Visit Profile</p>
  </a>
</div>
<p id="back">go back</p>