Buenos días quiero que cuando le de click a un input type="submit" cambie la clase del <body> para que este ejecute una animación, a la vez quiero que el "id" del input cambie para que me permita cambiarle nuevamente la clase al fondo, voy a tratar de explicarlo mejor aquí:

Código HTML :

<input type="submit" value="Ejecutar Animación" id="avanzar">


Mediante Jquery cambio las clases y los id:

Código Javascript :

$('#avanzar').click(function () {
  $("body").addClass("animacion1");//Añade una clase css al body que hace que el fondo se mueva
  $("#avanzar").prop('id', 'avanzar2');//Cambia el id del input para que éste pueda realizar posteriormente una nueva animación
});

$('#avanzar2').click(function () {
  $("body").removeClass("animacion1");//Elimina la clase con la que el fondo se animo inicialmente
  $("body").addClass("animacion2");//Añade una clase que permite que el fondo realize otra animación
  $("#avanzar2").prop('id', 'avanzar3');//Cambia nuevamente el id del input para realizar una nueva animación
});


El problema es que si tuviera dos input diferentes #animacion1 y #animacion2 funcionaría sin problema pero como trato de hacerlo desde el mismo input#avanzar no hace las animaciones.

Muchas gracias por su ayuda.