Why does my CSS Close button have two X characters?

Issue

I am currently making an expense tracker, where when someone inputs their expenses, it appears in a history div. I am bit confused as to how to approach this.

Here is an example output:

However, if you look closely, the button appears twice. I am confused as to how to solve this problem. I got the CSS code for the button from StackOverflow but changed it a bit.

Thanks.

function showHistory() {
  var count = values.length;
  document.getElementById('history').innerHTML = "";
  for (var i = 0; i < count; i++) {
    //class="btn-close btn-close-white"

    var st1 = "<div class='row' id='r1'><div class='col-md-7 border'>" + values[i].text + "<div class='row' id='r1'><div class='col-md-7'>" + values[i].brand + "</div>" + "<div class='col-md-3'>" + values[i].amnt + "</div>" + "<div class='col-md-1'><button class='close-icon' onclick='deleteam(\"" + values[i].id + "\")'>&times;</button></div></div>";
    var st2 = "<div class='row border' id='r2'><div class='col-md-7'>" + values[i].text + "<div class='row' id='r2'><div class='col-md-7'>" + values[i].brand + "</div>" + "<div class='col-md-3'>" + values[i].amnt + "</div>" + "<div class='col-md-1'><button class='close-icon' onclick='deleteam(\"" + values[i].id + "\")'>&times;</button></div></div>";
    (parseFloat(values[i].amnt) < 0) ? document.getElementById('history').innerHTML += st2: document.getElementById('history').innerHTML += st1;
  }
}

.close-icon {
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-width: 3px;
  border-style: solid;
  border-color: rgb(57, 100, 199);
  border-radius: 100%;
  background: -webkit-linear-gradient(
      -45deg,
      transparent 0%,
      transparent 46%,
      white 46%,
      white 56%,
      transparent 56%,
      transparent 100%
    ),
    -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white
          56%, transparent 56%, transparent 100%);
  background-color: rgb(57, 100, 199);
  transition: all 0.3s ease;
}

<div class="container" id="history"></div>

Solution

It is because you have CSS to generate the X but also have × unicode therefore it will have 2X, simply remove × from inside button

Note: Also you may delete the vendor prefixes for linear gradients

Answered By - dippas