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 + "\")'>×</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 + "\")'>×</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