Im working on a Tetris game, and im having issues with where the new shapes appear

So i am working on this Tetris game as a practice project however i have come to a standstill. i am able to generate the first shape and have it drop down automatically every second. i also made it so when you left click on the left side of the screen, the shape moves the the left, and when you left click on the right side of the screen it shifts the shape to the right. also right clicking anywhere on the screen rotates the image 90 degrees clockwise. My issue is that after the first shape finishes, the second shape gets generated in a completely different, random, position.
This is my HTML:

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris</title>
    <link rel="stylesheet" href="styleSheets/main.css">
    <script src = "https://code.jquery.com/jquery-3.4.1.js"></script>
    <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>

CSS:

.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;
}

JS:

var svgNS = "http://www.w3.org/2000/svg";
var endR = 500;
var endL = 0;
var endT = 0;
var endB = 650;
var x = 0;
var countO = 0;
var count1 = 0;
var count2 = 1000000;

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 = "transparent";
  outer.style.height = "100px";
  outer.style.width = "150px";
  outer.style.left = "150px";
  outer.style.top = "0px";
  outer.style.position = "relative";
  outer.style.transform = "rotate(0deg)"
  var shape = document.createElementNS(svgNS, "rect"); // creates part1 of color shape
  count1++
  shape.id = "shape" + count1;
  shape.style.width = "50px";
  shape.style.x = "50px";
  shape.style.y = "0px"
  shape.style.height = "51px";
  shape.style.fill = "purple";
  shape.style.position = "relative"
  outer.append(shape);
  var shape2 = document.createElementNS(svgNS, "rect"); // creates part2 of color shape
  count2++
  shape2.id = "shape2" + count2;
  shape2.style.fill = "purple";
  shape2.style.x = "0px";
  shape2.style.y = "50px";
  shape2.style.width = "150px";
  shape2.style.height  = "50px";
  outer.append(shape2);
  var t = setInterval(down, 1000); // calls down() function every second
  var xPos = parseInt(outer.style.width);
  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
    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);
    }
  }
  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()
  var t = setInterval(randShape, 12000)
}

I cut my code down to one shape to minimize the amount of code, any help would be greatly appreciated.