I am trying to create a button loop using the document.createElement() function in JavaScript. The function will successfully create a button, and the said button can run a function fine. The problem comes in when trying to remove, and re-create the button.

The desired output is as follows: When the 'Create Button' is pressed, it will create a button, called 'Continue'. When 'Continue' is pressed, the page will reset back to the default with 'Create Button' being displayed. You should be able to continue pressing these two buttons indefinitely.

This works, *but only once.*

After the 'Continue' button is pressed, the function `parentNode.removeChild()` function is ran for 'Continue'. This successfully deletes 'Continue', but it also, for some reason or another, prevents it from being created ever again.

Another method I've tried is using `document.getElementById().style.display = "none"`, but, without the presence of `parentNode.removeChild()`, every time the 'Continue' button's function is run, it creates duplicates of itself.

Basically, it either creates itself once and never again, or will create another of itself every time it runs.

Here's a code block using the `parentNode.removeChild()` function

```js
function displayContinue() {

  document.getElementById("button1").style.display = "none";

  var cont = document.createElement("BUTTON");
  cont.innerHTML = "Continue";
  document.getElementById("button2").appendChild(cont);
  var remove = document.getElementById("button2");

  cont.onclick = function cont() {
    document.getElementById("button1").style.display = "inline";
    remove.parentNode.removeChild(remove);
  }

}
//Function Output: Continue appears only the first time 'Create Button' is pressed
```

```html
<html>

<head>
  <title>Button Loop</title>
</head>

<body>

  <!-- Create Button -->
  <button id="button1" onclick="displayContinue()">Create Button</button>

  <!-- Place For Continue to Appear-->
  <p id="button2"></p>

  <!-- Create Button's Function -->
  <script type="text/Javascript">

  </script>
</body>

</html>
```

Additionally, here is a sample using the `document.getElementById().style.display = "none";` command

```js
function displayContinue() {

  document.getElementById("button1").style.display = "none";
  document.getElementById("button2").style.display = "inline";

  var cont = document.createElement("BUTTON");
  cont.innerHTML = "Continue";
  document.getElementById("button2").appendChild(cont);
  var remove = document.getElementById("button2");

  cont.onclick = function cont() {
    document.getElementById("button1").style.display = "inline";
    document.getElementById("button2").style.display = "none";
  }

}
//Function Output: 'Continue' is duplicated every time 'Create Button' is pressed
```

```html
<html>

<head>
  <title>Button Loop</title>
</head>

<body>

  <!-- Create Button -->
  <button id="button1" onclick="displayContinue()">Create Button</button>

  <!-- Place For Continue to Appear-->
  <p id="button2"></p>

  <!-- Create Button's Function -->
  <script type="text/Javascript">

  </script>
</body>

</html>
```

There has to be something I'm missing here. What is the solution?