I'm trying to make a mini game where there is a character standing from one position to another. when I make the character can return to the previous position, of course the character must flip position

this is what i did so far

     if(mv=='next'){
        var nxtpoint = parseInt(current)+1;
        var nxtpositionx =parseInt($("#pointmap-"+nxtpoint).attr('x'));
        var nxtpositiony = parseInt($("#pointmap-"+nxtpoint).attr('y'));
        var crntnxtbtn = $("#nxt-"+current);
        var crntprvbtn = $("#prv-"+current);
        var nxtbtn = $("#nxt-"+nxtpoint);
        var prvbtn = $("#prv-"+nxtpoint);
        charmv.css('transform','rotateY(0deg)');            
        charmv.animate({ "x": nxtpositionx+charpositionx, "y": nxtpositiony+charpositiony }, "slow" );
        if(nxtbtn){
            nxtbtn.css('display','block');
        }
        prvbtn.css('display','block');

        crntnxtbtn.css('display','none');
        crntprvbtn.css('display','none');
    }
    
    if(mv=='prev'){
        var prvpoint = parseInt(current)-1;
        var prvpositionx = parseInt($("#pointmap-"+prvpoint).attr('x'));
        var prvpositiony = parseInt($("#pointmap-"+prvpoint).attr('y'));
        var crntnxtbtn = $("#nxt-"+current);
        var crntprvbtn = $("#prv-"+current);
        var nxtbtn = $("#nxt-"+prvpoint);
        var prvbtn = $("#prv-"+prvpoint);
        // charmv.css('transform','rotateX(180deg)');
        // charmv.css('transform-origin','center');
        charmv.css('transform','scale(-1, 1)')
        charmv.animate({ "x": prvpositionx+charpositionx, "y": prvpositiony+charpositiony }, "slow" );            
        
        if(prvbtn){
            prvbtn.css('display','block');
        }
        nxtbtn.css('display','block');
        crntnxtbtn.css('display','none');
        crntprvbtn.css('display','none');
    }

but the flip changes the character's position and is not where it should be

Please help