Resolved: How to add a number to the bottom of my buttons?

Question:

I have a row of 5 buttons and I would like to add a display number to the bottom right corner of each. The number would display 0 (or nothing) unless I click the button and input a value for it to display. How might I go about doing this?
Here’s a snippet of my code:

var containerDiv = document.querySelector("#inner");
let tempCounterBtn = 0;
for (let i = 0; i < 1; i++) {
    let newDiv = document.createElement("div");
    newDiv.id = "div-" + (i + 1);
    containerDiv.appendChild(newDiv);
    for (let x = 0; x < 5; x++) {
        let btn = document.createElement("button");
        btn.innerHTML = "Hello!";
        btn.id = "button-" + (tempCounterBtn + 1);
        tempCounterBtn++;
        newDiv.appendChild(btn);
    }
}
button {
    background: black;
    color: white;
    border: 3.5px solid transparent;
    border-radius: 10px;
    padding: 2.8em 2.8em;
    background-repeat: no-repeat;
}

button:hover {
    border-color: #fff8cc;
    border: 3.5px solid;
    color: #fff8cc;
    box-shadow: 0em 0em 1em 0em #fff8cc;
}
<div class="main">
    <div id="inner"></div>
</div>

Answer:

You need another element. This way it would be easy to change its value.

var containerDiv = document.querySelector("#inner");
let tempCounterBtn = 0;
for (let i = 0; i < 1; i++) {
  let newDiv = document.createElement("div");
  newDiv.id = "div-" + (i + 1);
  containerDiv.appendChild(newDiv);
  for (let x = 0; x < 4; x++) {
    let btn = document.createElement("button");
    btn.innerHTML = "Hello!";
    btn.id = "button-" + (tempCounterBtn + 1);

    let div = document.createElement("div");
    div.classList.add("btn-wrapper")
    div.appendChild(btn)

    let counter = document.createElement("span");
    counter.classList.add("counter")
    counter.innerHTML = "0"

    div.appendChild(counter)

    btn.addEventListener("click", function(ev) {
      var num = prompt("Enter number", "1");
      if (num === null) {
        return
      }
      btn.parentElement.querySelector(".counter").innerText = num
    })
    tempCounterBtn++;
    newDiv.appendChild(div);
  }
}
button {
  background: black;
  color: white;
  border: 3.5px solid transparent;
  border-radius: 10px;
  padding: 2.8em 2.8em;
  background-repeat: no-repeat;
}

button:hover {
  border-color: #fff8cc;
  border: 3.5px solid;
  color: #fff8cc;
  box-shadow: 0em 0em 1em 0em #fff8cc;
}

.btn-wrapper {
  display: inline-block;
  position: relative;
  margin: 5px;
}

.counter {
  position: absolute;
  bottom: -1px;
  right: 0;
  bottom: -20px;
  font-size: 20px;
  color: white;
  background: red;
  border-radius: 50%;
  background: red;
  padding: 5px;
  color: white;
}
<div class="main">
  <div id="inner"></div>
</div>

If you have better answer, please add a comment about this, thank you!

If you like this answer, you can give me a coffee by <a href=”https://violencegloss.com/mkw7pgdwwr?key=2a96ade6f3760c7e63343a320febb78e”>click here</a>

Source: Stackoverflow.com