I'm learning JavaScript and this is a practice scenario for me.

What I have already is a button that clones content, and within that content that has been cloned, there is a button to remove it.

When I click the button that prompts you to remove the content, it removes the first set of content.

What I want to happen is when you click the button that prompts you to remove the content, it removes the content related to that button and nothing else.

This is the CodePen link.

<https://codepen.io/JosephChunta/pen/YzwwgvQ>

Here is the code.

```js
function addContent() {
  var itm = document.getElementById("newContent");
  var cln = itm.cloneNode(true);
  document.getElementById("placeToStoreContent").appendChild(cln);
}

function removeContent() {
  var x = document.getElementById("content").parentNode.remove();
}

// This is for debug purposes to see which content is which
document.getElementById('orderContent')
  .addEventListener('click', function(e) {
    const orderedNumber = document.querySelectorAll('.thisIsContent');
    let i = 1;
    for (p of orderedNumber) {
      p.innerText = '' + (i++);
    }
  });
```

```css
.contentThatShouldBeHidden {
  display: none;
}
```

```html
<div id="placeToStoreContent">

</div>

<button id="orderContent" onclick="addContent()">Add Content</button>

<div class="contentThatShouldBeHidden">
  <div id="newContent">
    <div id="content">
      <p class="thisIsContent">This is a prompt</p>
      <button onclick="removeContent()">Remove this</button>
      <hr />
    </div>
  </div>
</div>
```