Je n'arrive pas à enlever une "class"

Bonjour,

Edit j'ai trouvé la solution pour les déplacements seul mon problème de class que je n'arrive pas à enlever persiste

Je suis en train de faire un jeu de plateau en JS. Pour la partie mouvement des joueurs jaimerais utiliser jQuery. J'essai depuis plusieurs jours mais je ne trouve pas la solution. C'est la partie jQuery qui me pose problème, pour l'instant je ne m'occupe pas de la position du sprite je gererais les positions des differentes images aprés. Je conserve la m^me position pour mes déplacements pour l'instant.

Ce que je fais

Tout fonctionne bien jusqu'au comm. : " /***déplacement" ou débute jQuery.

Je n'arrive pas à enlever la class "joueur1" quand mon sprite monte ou vas à droite par exemple toutes les cases conservent cette class. Je dois mal utiliser jQuery, j'ai plusieurs problèmes notament je ne peux pas revenir sur une position car le background est vide il faut absolument que la class joueur 1 s'enlève quand le joueur part, le toogleClass agit dans un sens seulement car il met bien la class mais il ne l'enlève pas
Mes div ont des id "board-0" à "board-99" d'ou l'utilisation de substr() pour récuperer les chiffres que je passe ensuite dans parseInt().

var Personnage = {
    initPerso: function (nom, sante, player1, player2) {
        this.nom = nom;
        this.sante = sante;
        this.player1 = "url('../images/monstre.png') 0% 0% /400% 400% rgba(165, 150, 116, 0.61)";
        this.player2 = "url('../images/demon.png') 0% 0%/400% 400% rgba(165, 150, 116, 0.61)";

    },
    afficher: function () {
        var mesDiv = document.getElementsByClassName('accesOn');
        //Personnage 1
        console.log(mesDiv);
        var pos1 = Math.round(Math.random() * mesDiv.length);
        var maDivPos1 = mesDiv[pos1];
        maDivPos1.style.background = this.player1;
        maDivPos1.classList.add('joueur1');

        //Recuperation ID de maDivPos1
        var maDivId = maDivPos1.id;

        //trasformation JS vers Jquery
        var $player1 = this.player1;
        var $posDiv = maDivPos1;

        //personnage 2
        var pos2 = Math.round(Math.random() * mesDiv.length);
        var maDivPos2 = mesDiv[pos2];
        maDivPos2.style.background = this.player2;

        maDivPos2.classList.add('joueur2');

        //************************** deplacement
        function main() {
            var $nombreId = maDivId.substr(6);
            var $posDiv1 = parseInt($nombreId);

            var $largeur = ($('#contenu').width());
            var $hauteur = ($('#contenu').height());
            //  var $posPlay1X = parseInt($($posDiv1).css('left'));
            // var $posPlay1Y = parseInt($($posDiv1).css('top'));
            $(window).on('keydown', function (e) {
                var touche = e.which;
                switch (touche) {
                //haut (les déplacements fonctionne bien)
                    case 38:

                        var $newPosH = $posDiv1 -= 10;
                       var $newPos = $("#board-" + $newPosH);

                        $($newPos).css('background', $player1);
                        $('.joueur1').css('background', "");
                        $($newPos).toggleClass('joueur1'); // Ajoute la class mais ne l'enleve pas
                        $($posDiv).removeClass('joueur1'); // PAS BON retire la class sur la first position sert a rien!!!

                        break;
                        //Droite  ( j'ai trouvé la solution pour les déplacements)
                    case 39: 

                        break;
                        //bas
                    case 40:

                        break;
                        //Gauche
                    case 37:

                        break;
                    default:
                        break;
                }

            });

        }
        $(document).ready(main);
    };

Merci d'avance à ceux qui prendront le temps de m'aider
si je suis pas clair ou si j'explique mal dites moi.