JS：函数调用覆盖了我的其他2个函数调用？

Question

我正在尝试设计一个用于升级攻击技能的菜单系统。例如，当您单击升级“罢工技能”时，您将获得一个具有3个子集技能的圆圈以升级到。

我遇到的问题是我的函数调用。类似类型的最后一个函数似乎覆盖了前两个函数，因此不是用它们的数字填充所有3个圆圈，而是仅覆盖最后的2个。为什么会这样做，我该如何解决？

问题：

skills("skills", "attack1", "I");   
skills("skills", "attack2", "II");  
skills("skills", "attack3", "III");  

Javascript代码：

 function upgradeBar() {
     menu("upgradeMenu", "systemMenu");
 }


 function menu(classID, id) {
        var button = dom.el("skill"); // Apply DIV to THIS location
        var x = document.createElement("div");
        x.setAttribute("class", classID);
        x.setAttribute("id", id);
        button.appendChild(x);

    function skills(classID, id, text){
        var circle = dom.el("systemMenu"); // Apply DIV to THIS location
        var x = document.createElement("div");
        x.setAttribute("class", classID);
        x.setAttribute("id", id);
        circle.appendChild(x);
        dom.setText("attack1", text);
        }
    skills("skills", "attack1", "I");   
    skills("skills", "attack2", "II");  
    skills("skills", "attack3", "III");  
}

CSS代码：

.upgradeMenu {
    width: 100px;
    height: 100px;
    background-color: white;
    border: 1px solid black;
    border-radius: 50px;
    position: relative;
}

#attack1 {
    width: 50px;
    height: 50px;
    background-color: white;
    border: 1px solid black;
    border-radius: 50px;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -10px;
}

#attack2 {
    width: 50px;
    height: 50px;
    background-color: white;
    border: 1px solid black;
    border-radius: 50px;
    position: absolute;
    top: 0;
    right: 0;
    margin-right: -10px;
}
#attack3 {
    width: 50px;
    height: 50px;
    background-color: white;
    border: 1px solid black;
    border-radius: 50px;
    position: absolute;
    bottom: 0;
    margin-left: 23px;
    margin-bottom: -10px;
}