Object programming in javascript to iteratively create and manipulate CSS attributes of HTML elements

Question

I'm having big trouble creating several buttons each with a different id named based on the state of a for loop. I'm sorry, I'm having a hard time describing this with words but I'm pretty sure the code below will make sense:

function newButton() {
    return button = '<button id=" ${this.playerNumber} "></button>';
}

function Player(playerNumber, timeout, sec) {
  this.playerNumber = playerNumber;
  this.timeout = timeout;
  this.sec =sec;
  this.div = document.createElement("div");
  this.newButton = newButton;
}

var newPlayerNode = document.getElementById('newPlayerNode');

var players =[];

for (var i = 0; i < numberOfPlayers; i++) {
    players[i] = new Player(i,0,parseInt(turnLength));
    players[i].div.innerHTML = players[i].newButton();
    newPlayerNode.appendChild(players[i].div);
}

Indeed, the final HTML result still has the id <button id=" ${this.playerNumber} .... instead of replacing the id with the playernumber (0, 1, etc.)