点击次数增加/减少

Question

每个新添加的LI项都会生成带有计数器（默认为0）的reduce（-）和增量（+）按钮，在单击reduce和增加按钮后，计数器仅针对第一个添加的LI项而变化添加。

方法不正确吗？还是我的代码中缺少什么？

HTML：

<div id="countSection">
        <div class="text" id="countText">
            <i class="fas fa-plus"></i><span>Add</span>
        </div>
        <ul id="countUl"></ul>
    </div>

JS：

var countText = document.getElementById("countText");
var entryAlert;
var entryDisplay;

countText.addEventListener("click", function () {
entryAlert = prompt("Whats the count about");
var counter = 0;
entryDisplay = `
<li class="enteries">
<span id="reduce"> - </span>
${entryAlert}
<span id="myCount"> ${counter} </span>
<span id="increase"> - </span>
</li>
`;

countUl.innerHTML += entryDisplay;

for (var i = 0; i < liList.length; i++) {
    liList[i].onclick = function () {
        reduce.onclick = function () {
            myCount.innerHTML = --counter;
        }
        increase.onclick = function () {
            myCount.innerHTML = ++counter;
        }
    }
}