How to move a character from 1 to 3 squares on a grid?

I need to make a turn based game in js and jquery. The rules are :

• The 2 characters, the 4 weapons and the 15 obstacles are randomly generated on a grid(made with HTML table and generated in a loop)
• The characters cannot be side by side
• The characters can move 1 to 3 squares taking into account the collision with obstacles
  with the mouse by selecting from 1 to 3 boxes each turn to advance in the grid.

I already did the first step but I’m struggling with moving so I wondering if anyone can help ?
Thanks !

let player1 = {};
let player2 = {};

var toolbox = {

    initialiserEmptyTab: function(nbLines, nbCols, car = ''){
        var tab = [];
        for(var i = 0;i < nbLines;i++){
            var lines = [];
            for(var j  =0;j < nbCols; j++){
                ligne.push(car);
            }
            tab.push(lines);
        }
        return tab;
    }
}

var game = {
    nbCols : 10,
    nbLines : 10,
    grid : [],

    // initialization of the elements and the grid via the toolbox
    initialisation() {
        this.grid = toolbox.initialisationEmptyTab(this.nbLines,this.nbCols,0);
        this.positioningP1(1,1); // nombre de cases(nombre), id(player)
        this.positioningP2(1,2);
        this.positioningObstacles(15, 3)
        this.positioningWeapons(1, 4)
        this.positioningWeapons(1, 5)
        this.positioningWeapons(1, 6)
        this.positioningWeapons(1, 7)
    },

    getCase(xRandom,yRandom) {  // to create x and y
        var cellule = {};
        cellule.x = xRandom;
        cellule.y = yRandom;
        return cellule;
    },

    verifEmptyBox(caseB) {  // to check if the box is empty
        if(this.grid[caseB.x][caseB.y] === 0){
            return true;
        } else {
            return false;
        } 
    },
    
    showGrid() {  // all of what we see on the grid
        const game = document.querySelector("#game");
        game.innerHTML = "";
        
        var content = "<table>";
            for(var i = 0; i < this.nbLines;i++) {
                content += "<tr>";
                for(var j = 0 ; j < this.nbCols;j++) {
                    content += "<td class='border border-dark text-center' style='width:60px;height:60px'>";
                    if(this.grid[i][j] === 0) {
                       // empty square
                    } 
                    if(this.grid[i][j] === 1) {
                        content += "<img src='/img/P1.png' class='bg-danger rounded-circle' style='width:50px;height:50px' />";
                    } 
                    if(this.grid[i][j] === 2) {
                        content += "<img src='/img/P2.png' class='bg-info rounded-circle' style='width:50px;height:50px' />";
                    }
                    if(this.grid[i][j] === 3) {
                        content += "<img src='/img/roche.png' style='width:50px;height:50px'/>";
                    }
                    if(this.grid[i][j] === 4) {
                        content += "<img src='/img/weapon1.png' style='width:40px;height:40px'/>";
                    }
                    if(this.grid[i][j] === 5) {
                        content += "<img src='/img/weapon2.png' style='width:40px;height:40px'/>";
                    }
                    if(this.grid[i][j] === 6) {
                        content += "<img src='/img/weapon3.png' style='width:40px;height:40px'/>";
                    }
                    if(this.grid[i][j] === 7) {
                        content += "<img src='/img/weapon4.png' style='width:40px;height:40px'/>";
                    }
                    content += "</td>";
                }
                content += "</tr>";
            }
        content += "</table>";
        game.innerHTML = content;
    },

    positioningP1(nombre, player) {
        for(var i = 0 ; i < nombre ; i++) {
            let xRandom = Math.floor(Math.random() * (this.nbLines-1));
            let yRandom = Math.floor(Math.random() * (this.nbCols-1));

            let posPlayer = {};
                posPlayer["case"+i] = this.getCase(xRandom, yRandom);
                player1 = posPlayer["case"+i];
                console.log(player1);

            let emptyBox = this.verifemptyBox(posPlayer["case"+i]);
            if(emptyBox == true) {
                this.saveCoords(posPlayer,player);
            } else {
                i--;
            }
        }
    },

    positioningP2(nombre, player) {
        let i = 0;
        while(i < nombre) {
            i = 0;
            let xRandom = Math.floor(Math.random() * (this.nbLines-1));
            let yRandom = Math.floor(Math.random() * (this.nbCols-1));
        
            let posPlayer = {};
            posPlayer["case"+i] = this.getCase(xRandom, yRandom);
            player2 = posPlayer["case"+i];
            console.log(player2);

            let emptyBox = this.verifemptyBox(posPlayer["case"+i]); // from there, avoids that the characters are side by side.
            if(emptyBox == true && (Math.abs(player2.x - player1.x) >= 1 
            && Math.abs(player2.y - player1.y))) { //checks the absolute difference between the rows and columns of the two players
                console.log("true");
                this.saveCoords(posPlayer,player);
                i++;
            } else {
                console.log(false);
                player2 = [''];
                i--;
            }
        }
    },

    saveCoords(posPlayer,player) { //save the coords
        for(var cellule in posPlayer) {
            this.grid[posPlayer[cellule].x][posPlayer[cellule].y] = player;
        }
    },

    positioningObstacles(nombre,obstacles) {
        var posObstacles = {}; //object
        var xRandom = 0;
        var yRandom = 0;
        var emptyBox = true;

        for(var i = 1 ; i <= nombre ; i++) {
            xRandom = Math.floor(Math.random() * (this.nbLines-1));
            yRandom = Math.floor(Math.random() * (this.nbCols-1));
            
            posObstacles["case"+i] = this.getCase(xRandom, yRandom);
            emptyBox = this.verifemptyBox(posObstacles["case"+i]);
            if(emptyBox == true) {
                this.saveCoordsObstacles(posObstacles,obstacles);
            } else {
                i--;
            }    
        }
    },

    saveCoordsObstacles(posObstacles,obstacles) {
        for(var cellule in posObstacles) {
            this.grid[posObstacles[cellule].x][posObstacles[cellule].y] = obstacles;
        }
    },

    positioningWeapons(nombre,Weapons) {
        var posWeapons = {}; //object
        var xRandom = 0;
        var yRandom = 0;
        var emptyBox = true;

        for(var i = 1 ; i <= nombre ; i++) {
            xRandom = Math.floor(Math.random() * (this.nbLines-1));
            yRandom = Math.floor(Math.random() * (this.nbCols-1));
            
            posWeapons["case"+i] = this.getCase(xRandom, yRandom);
            emptyBox = this.verifemptyBox(posWeapons["case"+i]);
            if(emptyBox == true) {
            this.saveCoordsObstacles(posWeapons,Weapons);
            } else {
                i--;
            }    
        }
    },

    saveCoordsWeapons(posWeapons,Weapons) {
        for(var cellule in posWeapons) {
            this.grid[posWeapons[cellule].x][posWeapons[cellule].y] = Weapons;
        }
    },
}

// initialisation of the map
game.initialisation();
game.showGrid();
```