Javascript 单击按钮时使用可进行的条形图

选择英语-高级

总数：0
var单位=0；
document.getElementById（'englishA'）。onclick=function（）{
单位=单位+2；
document.getElementById（“总计”）.innerHTML=单位；
};

我想做一个简单的图表，当按下某些按钮时，它会上升2个单位（有些按钮只会上升1个单位）。有没有一种简单的CSS或jQuery方法可以做到这一点

---

此外，当按下一个按钮时，它会变为删除，如果按下“删除”，则会从图形中扣除2个单位，然后再次显示原始按钮。

是每个按钮两个单位，还是像我按下最上面的按钮一样，单位应该最大？每个按钮两个单位，但一些按钮只有1个单位

<button id="englishA" class="select" type="button">Select</button>ENGLISH - ADVANCED<br />
<h2>Total: <span id="total">0</span></h2>

var units=0;
document.getElementById('englishA').onclick = function() {
    units=units+2;
    document.getElementById("total").innerHTML = units;
};