Dice roller problem

HTML

<p id="startnew">
  start new roller
</p>
<div id="page-content-wrapper">

  </div

CSS

.dice-window-wrapper {
  height: 170px;
  width: 300px;
  background-color: lightblue;
  margin-bottom: 10px;
}

.add-dice {
  width: 80px;
  height: 20px;
  background-color: blue;
  text-align: center;
}

.dice {
  height: 20px;
  width: 20px;
  background-color: white;
  margin: 5px;
  text-align: center;
  float: left;
}

JavaScript

document.getElementById("startnew").addEventListener("click", newroller);

function newroller() {
  var diceWindowWrapper = document.createElement("div");
  diceWindowWrapper.className = "dice-window-wrapper";
  document.getElementById("page-content-wrapper").appendChild(diceWindowWrapper);

  var addDice = document.createElement("div");
  addDice.className = "add-dice";
  addDice.innerHTML = "Add Dice";
  addDice.addEventListener("click", insertDice);
  diceWindowWrapper.appendChild(addDice);

  function insertDice() {
    var diceSideTwo = document.createElement("div");
    diceSideTwo.className = "dice dice-side-two";
    diceSideTwo.innerHTML = "2";
    diceSideTwo.setAttribute('data-diceValue', '2');
    diceWindowWrapper.appendChild(diceSideTwo);
    
    this.nextSibling.innerHTML = getSumDiceValue();
  };

  var totalDiceSumm = document.createElement("p");
  totalDiceSumm.className = "dice-summ";
  totalDiceSumm.innerHTML = getSumDiceValue();
  diceWindowWrapper.appendChild(totalDiceSumm);

  function getSumDiceValue() {
    var dice = document.getElementsByClassName("dice");
    var diceTotal = 0;
    for (var i = 0; i < dice.length; i++) {
      diceTotal += Number(dice[i].getAttribute("data-diceValue"));
    };

    return diceTotal;
  };
};