Javascript 动态添加行时计数器的增量

我正在尝试动态添加行加上计数器的自动增量。我希望从1开始，然后是2，然后是3，依此类推。我在plunker上添加了我的代码，每次最大值出现在第一列，比如4，然后是1，1，2，3。我哪里出错了？我希望它是1，2，3，4

这是plunker链接

var\u计数器=0；
函数Add（）{
_计数器++；
var oClone=document.getElementById（“模板”）.cloneNode（true）；
oClone.id+=（_counter+）；
document.getElementById（“占位符1”）.appendChild（oClone）；
document.getElementById（“myVal”）.value=\u计数器；
}
价值：
数量：

---

我想您正在寻找这样的产品：

var\u计数器=0；
函数Add（）{
_计数器++；
var oClone=document.getElementById（“模板”）.cloneNode（true）；
oClone.id+=（_counter+）；
document.getElementById（“占位符1”）.appendChild（oClone）；
oClone.getElementsByClassName（“myVal”）[0]。值=\u计数器；
}

价值：
数量：

我认为这是因为您有多个id为“myVal”的div。在页面上。否则，页面仍将加载，但可能会出现意外行为

您正在更改模板div的id，但不是myVal div

            var _counter = 0;           
        function Add() {
            _counter++;
            var oClone = document.getElementById("template").cloneNode(true);
            oClone.id += (_counter + "");
            document.getElementById("placeholder1").appendChild(oClone);
            document.getElementById("myVal").value=_counter;

        }

    <div id="placeholder1">
    <div id="template">
        <div>
        Value:<input type="text" id="myVal" placeholder="1">
        Quantity:<input type="text" placeholder="Qty">

            <input type="button" onClick="Add()" value="Click! ">
        </div>
    </div>