why wont my boxes stack on top of each other as intended

I am working on a Tetris game and right now im trying to get the boxes to stack on top of each other. Like i said this is a Tetris game so i need to deactivate the shape once its done, so i push each shapes attributes to an array, then at the beginning of the down() function i iterate through the comp array, compare my current attributes to the attributes of the dead shapes within the array, if there is no match, the shape moves down. otherwise, the shape gets deactivated. This works, however the second shape overlaps the first shape by 50pxs but the rest line up perfect.

var svgNS = "http://www.w3.org/2000/svg";
var endR = 500;
var endL = 0;
var endT = 0;
var endB = 650;
var x = 0;
countO = 1;
count1 = 0;
count2 = 1000000;
var comp = [{
    id: 0,
    yPos: "650px"
}];

function createShape1() {
    var endR1 = 500;
    var endL1 = 0;
    var endT1 = 0;
    var endB1 = 650;
    var newEndR = endR1; //used to set boundaries right
    var endR10a = endR1 - 50; //used to set boundaries right
    var endR10b = endR1 + 50; //used to set boundaries right
    var newEndL = endL1; //used to set boundaries left
    var endL10a = endL1 - 50; //used to set boundaries left
    var endL10b = endL1 + 50; //used to set boundaries left
    var newEndB = endB1; //used to set boundaries bottom
    var endB10a = endB - 50; //used to set boundaries bottom
    var rotEndR = endR1 + 50; //used to set right boundaries for rotation
    var rotEndRa = endR1; //used to set right boundaries for rotation
    var rotEndL = endL1; //used to set left boundaries for rotation
    var rotEndT = endT1; //used to set top boundaries for rotation
    var rotEndB = endB1; //used to set bottom boundaries for rotation
    var elem = document.getElementById("container");
    var outer = document.createElementNS(svgNS, "svg"); //creates full transparent shape
    countO++;
    var leftG = document.getElementById("left");
    var rightG = document.getElementById("right");
    leftG.addEventListener("click", moveLeft); // click left half of screen to call moveLeft() function
    rightG.addEventListener("click", moveRight); // click right half of screen to call moveRight() function
    elem.append(outer);
    outer.id = "outer" + countO;
    outer.style.background = "grey";
    outer.style.height = "100px";
    outer.style.width = "150px";
    outer.style.left = "150px";
    outer.style.top = "0px";
    outer.style.position = "absolute";
    outer.style.transform = "rotate(0deg)"
    var t = setInterval(down, 1000); // calls down() function every second
    var xPos = parseInt(outer.style.left);
    var yPos = parseInt(outer.style.top);
    var w = parseInt(outer.style.width);
    var h = parseInt(outer.style.height);
    var ymath = yPos + h;   
    elem.addEventListener('contextmenu', rotateRight); // right click to call the rotateRight() function
    function down() {  // moves shape down by 50px
        for (let shape of comp) {
            var shapeX = parseInt(shape.xPos);
            var shapeW = parseInt(shape.width);
            var shapeY = parseInt(shape.yPos);
            var shapeH = parseInt(shape.h);
            if (ymath === shapeY) {
                clearInterval(t);
                elem.removeEventListener("contextmenu", rotateRight); // cancels rotation
                leftG.removeEventListener("click", moveLeft); // cancels moveLeft() function
                rightG.removeEventListener("click", moveRight); //cancels moveRight() function
                comp.push({
                    id: countO,
                    xPos: outer.style.left,
                    w: outer.style.width,
                    yPos: outer.style.top,
                    h: outer.style.height
                })
                randShape();
            }
        }    
        if (ymath < newEndB) {
            yPos += 50;
            ymath = yPos + h;
            outer.style.top = yPos + 'px';
            if (outer.style.transform === "rotate(90deg)") {
                newEndL = endL10a;
            }
            if (outer.style.transform === "rotate(180deg)") {
                newEndL = endL10a;
                newEndR = endR10a;
            }
            if (outer.style.transform === "rotate(270deg)") {
                newEndR = endR1;
                newEndB = endB10a;
            }
            if (outer.style.transform === "rotate(0deg)") {
                newEndB = endB1;
                newEndL = endL10b;
            }                    
        } else {
            clearInterval(t);
            elem.removeEventListener("contextmenu", rotateRight);// cancels rotation
            leftG.removeEventListener("click", moveLeft); // cancels moveLeft() function
            rightG.removeEventListener("click", moveRight);//cancels moveRight() function
        }
    }
    function rotateRight(e) { // rotates shape by 90 degrees clockwise
        e.preventDefault();
        var xmath = xPos + w;
        var xmath2 = xPos - w;
        var ymath = yPos + h;
        if (xmath < rotEndR && xmath > rotEndL) {
            if (ymath < rotEndB && yPos > rotEndT) {
                x += 90
                outer.style.transform = "rotate(" + x + "deg)";
                if (x === 270) {
                    x = -90;
                }
                outer.style.transformOrigin = "100px 50px";
                if (outer.style.transform === "rotate(90deg)") {
                    rotEndR = rotEndRa;
                }
                if (outer.style.transform === "rotate(180deg)") {
                    rotEndR = endR10b;
                }
                if (outer.style.transform === "rotate(270deg)") {
                    rotEndL = endL10b + 50;
                }
            }
        }
    }
    function moveLeft() { // shifts to the left by 50px
        var xmath = xPos;
        var ymath = yPos + h;
        if (xmath > newEndL - 50 && ymath < newEndB + 50) {
            xPos -= 50;
            xmath += w;
            outer.style.left = xPos + "px";
        }
    }
    function moveRight() { // shifts to the right by 50px
        var ymath = yPos + h;
        var xmath = xPos + w;
        if (xmath < newEndR && ymath < newEndB) {
            xPos += 50;
            outer.style.left = xPos + "px";
            ymath += h;
            xmath += w;
        }
    }
};



var shapes = [createShape1];
function randShape() {
    shapes[0]();
};

window.addEventListener("click", startGame, { once: true })

function startGame() {
    randShape()
}

.grid {
    background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px),
        repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
    background-size: 50px 50px;
    top: 0px;
    height: 651px;
    position: absolute;
    width: 501px;
}

#left {
    top: 0px;
    width: 250px;
    height: 650px;
    position: absolute;
    background: transparent;
}

#right {
    left: 250px;
    top: 0px;
    width: 250px;
    height: 650px;
    position: absolute;
    background: transparent;
}

<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tetris(test)</title>
  <link rel="stylesheet" href="styleSheets/main.css">
  <script src="js/jquery.js"></script>
  <script src="js/main.js"></script>
</head>

<body>
  <div id="container" style="height: 650px; width: 500px; background: black; position: relative">
    <div class="grid">
      <div id="left"></div>
      <div id="right"></div>
    </div>
  </div>

</body>

</html>