Why is the button created with createElement not showing?

let but1 = document.querySelector("#submit")
but1.addEventListener("click", displayTable);

function displayTable() {
  document.getElementById("setCriteria").classList.add("hide");
  let para = document.getElementById("table");

  const mathTYPE = document.querySelector('input[name="mathType"]:checked').value;
  const numberCHOICE = Number(document.querySelector('input[name="number"]:checked').value);
  let text = "";

  if (mathTYPE === "Addition") {
    for (let i = numberCHOICE; i < numberCHOICE + 1; i++) {
      for (let j = 0; j < 11; j++) {
        text += `${i} + ${j} = ${i+j}` + "<br>";
      }
    }
  } else if (mathTYPE === "Subtraction") {
    for (let i = numberCHOICE; i < numberCHOICE + 1; i++) {
      for (let j = 0; j < 11; j++) {
        text += `${i} - ${j} = ${i-j}` + "<br>";
      }
    }
  } else if (mathTYPE === "Multiplication") {
    for (let i = numberCHOICE; i < numberCHOICE + 1; i++) {
      for (let j = 0; j < 11; j++) {
        text += `${i} X ${j} = ${i*j}` + "<br>";
      }
    }
  } else {
    for (let i = numberCHOICE; i < numberCHOICE + 1; i++) {
      for (let j = 0; j < 11; j++) {
        text += `${i} / ${j} = ${i/j}` + "<br>";
      }
    }
  }
  para.innerHTML = text;
  createButton()


  function createButton() {
    let but2 = document.createElement("button");
    but2.textContent = "Go back to menu";
    document.body.appendChild(btn2);
    btn2.addEventListener('click', () => {
      document.getElementById("setCriteria").classList.remove("hide");
      para.classList.add("hide");
    })
  }
}

.hide {
  display: none;
  background-color: black;
}

body {
  background-color: pink;
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.5em;
  font-style: normal;
}

.intro {
  font-size: 1.8em;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&display=swap" rel="stylesheet">

<h1>Arithmetics</h1>
<section id="setCriteria">

  <p class="intro">Choose the type of indicator you want to practice:</p>

  <input type="radio" id="add" name="mathType" value="Addition">
  <label for="Addition">Addition</label><br>
  <input type="radio" id="sub" name="mathType" value="Subtraction">
  <label for="Subtraction">Subtraction</label><br>
  <input type="radio" id="mult" name="mathType" value="Multiplication">
  <label for="Multiplication">Multiplication</label><br>
  <input type="radio" id="div" name="mathType" value="Division">
  <label for="Division">Division</label><br>
  </form>
  <br>

  <p class="intro">Great! Now, let's decide what number you want to see the tables for:
  </p>

  <input type="radio" id="1" name="number" value="1">
  <label for="1">1</label><br>
  <input type="radio" id="2" name="number" value="2">
  <label for="2">2</label><br>
  <input type="radio" id="3" name="number" value="3">
  <label for="3">3</label><br>
  <input type="radio" id="4" name="number" value="4">
  <label for="4">4</label><br>
  <input type="radio" id="5" name="number" value="5">
  <label for="5">5</label><br>
  <input type="radio" id="6" name="number" value="6">
  <label for="6">6</label><br>
  <input type="radio" id="7" name="number" value="7">
  <label for="7">7</label><br>
  <input type="radio" id="8" name="number" value="8">
  <label for="8">8</label><br>
  <input type="radio" id="9" name="number" value="9">
  <label for="9">9</label><br>
  <input type="radio" id="10" name="number" value="10">
  <label for="10">10</label><br>
  </input>
  <br>
  <button type="submit" id="submit">Submit</button>
</section>
<p id="table"></p>