Why this setInterval() does not work to move the snake variable to right direction in this if statement? – Javascript

I want to move snake left and right, it moves to the right direction well but when i click left it just stops and does not move left, i know that setInterval returns id but why does not it moves right ?

const snake = document.querySelector(".box");
const btns = document.querySelectorAll(".btns > button");
var X = 0;
var intervalrightId;
var intervallefttId;

btns.forEach((btn) => {
    btn.addEventListener("click", function(e) {
        if (e.target.textContent == "right") {
            if (intervallefttId) {
                clearInterval(intervallefttId)
            }

            intervalrightId = setInterval(() => {
                X += 100;
                snake.style.left = X;
            }, 500)
        }

        if (e.target.textContent == "left") {
            if (intervalrightId) {
                clearInterval(intervalrightId)
            }

            intervallefttId = setInterval(() => {
                X -= 100;
                snake.style.right = X;
            }, 500)
        }
    })
})