How to keep CSS animated element properties to be the initial properties of another animation?

Good Day.

I am coding a simple "winwheel" game. I have several DIV elements, that move vertically, when a user event happens.

The player can spin the wheel TWO times. So, i want the second spin to start from the final position of the first spin.

I use the JQuery .addClass attribute to trigger the animation and animation-fill-mode: forwards to keep the ending keyframes after first animation completion. That is fine.

But for the second animation, if i use .removeClass.addClass or toggleClass, the first animation reverts and the div elements reposition to the orgininal coordinates.

Could you help me?

Thanks!

This is the desired output:

CSS

.mybox {
  margin: 1 0 0 38;
  width: 270px;
  height: 100px;
  font-size:100;
  text-align:center;
  font-weight:bold;
  display: table;
  position:relative;  
  z-index:1;  
}

.myanimation{
    --m: 0px; 
    -webkit-animation: myanimation 10s forwards ease;
}
@-webkit-keyframes myanimation {

  100% {
    -webkit-transform: translateX(0px) translateY(var(--m));
    -moz-transform: translateX(0px) translateY(var(--m));
    -ms-transform: translateX(0px) translateY(var(--m));
    -o-transform: translateX(0px) translateY(var(--m));
    transform: translateX(0px) translateY(var(--m));
    
  }
}

.myanimation2{
    --m: 0px; 
    -webkit-animation: myanimation2 10s forwards ease;
}

@-webkit-keyframes myanimation2 {

  100% {
    -webkit-transform: translateX(0px) translateY(var(--m));
    -moz-transform: translateX(0px) translateY(var(--m));
    -ms-transform: translateX(0px) translateY(var(--m));
    -o-transform: translateX(0px) translateY(var(--m));
    transform: translateX(0px) translateY(var(--m));
    
  }
}

JS

 function clicko(mode, index){

    //power calculation
    var power= eval(125*20) 
    var ajuste = eval(index * eval(125*20)) 
    adjust = eval(adjust /100)
    power = eval(power + adjust )

    // + - 20%
    var porcen = Math.floor(Math.random() * 20)+1
    if (Math.floor(Math.random() * 2)==0){
        
        power= eval(parseInt(power) + Math.round(eval((porcen*power)/100)))     
    }else{
        
        power= eval(parseInt(power) - Math.round(eval((porcen*power)/100)))     
    }




    //ANIMATE
    if(mode==='1'){

        var myBox = $(".mybox");
        myBox.addClass("myanimation");
        document.querySelector('.mybox').style.setProperty('--m',power+ 'px');

  }else{

        var myBox = $(".mybox");
        $(".mybox").removeClass('myanimation').addClass('myanimation2')
        document.querySelector('.mybox').style.setProperty('--m',power+ 'px');
     
  }

RESOLVED!!!

Thanks to @G-Cyrillus

CSS

    .mybox {
      margin: 1 0 0 38;
      width: 270px;
      height: 100px;
      font-size:100;
      text-align:center;
      font-weight:bold;
      display: table;
      position:relative;  
      z-index:1;  
    }
    
    .myanimation{
        --m: 0px; 
        -webkit-animation: myanimation 10s forwards ease;
    }
    @-webkit-keyframes myanimation {
    
      100% {
        -webkit-transform: translateX(0px) translateY(var(--m));
        -moz-transform: translateX(0px) translateY(var(--m));
        -ms-transform: translateX(0px) translateY(var(--m));
        -o-transform: translateX(0px) translateY(var(--m));
        transform: translateX(0px) translateY(var(--m));
        
      }
    }
    
    .myanimation2{
        --m: 0px; 
        --m2: 0px
        -webkit-animation: myanimation2 10s forwards ease;
    }
    
    @-webkit-keyframes myanimation2 {
    
  0% {
        -webkit-transform: translateX(0px) translateY(var(--m));
        -moz-transform: translateX(0px) translateY(var(--m));
        -ms-transform: translateX(0px) translateY(var(--m));
        -o-transform: translateX(0px) translateY(var(--m));
        transform: translateX(0px) translateY(var(--m));
   }
  100% {
        -webkit-transform: translateX(0px) translateY(var(--m2));
        -moz-transform: translateX(0px) translateY(var(--m2));
        -ms-transform: translateX(0px) translateY(var(--m2));
        -o-transform: translateX(0px) translateY(var(--m2));
        transform: translateX(0px) translateY(var(--m2));
   }
    }

JS

     function clicko(mode, index){

        //power calculation
        var power= eval(125*20) 
        var ajuste = eval(index * eval(125*20)) 
        adjust = eval(adjust /100)
        power = eval(power + adjust )

        // + - 20%
        var porcen = Math.floor(Math.random() * 20)+1
        if (Math.floor(Math.random() * 2)==0){
            
            power= eval(parseInt(power) + Math.round(eval((porcen*power)/100)))     
        }else{
            
            power= eval(parseInt(power) - Math.round(eval((porcen*power)/100)))     
        }




        //ANIMATE
        if(mode==='1'){

            var myBox = $(".mybox");
            myBox.addClass("myanimation");
            document.querySelector('.mybox').style.setProperty('--m',power+ 'px');

      }else{

            var myBox = $(".mybox");
            $(".mybox").addClass('myanimation2')

            document.querySelector('.mybox').style.setProperty('--m2',parseInt(document.querySelector('.mybox').style.getPropertyValue('--m').replace('px',''))+power +'px'
             
      }