Javascript：添加新元素时，先前元素的数据丢失了吗？

Question

标识为“ add_barcode”的图标将输入字段一个接一个地添加。但是，问题是当我添加例如2个新输入并在其中输入一些文本，然后添加第三个输入时-我之前键入的文本消失了。

-HTML                                                                               

                            <div class="left">
                                Bardcode:
                            </div>
                            <div class="center" style="margin-left:10px;">
                                <ons-list-item><ons-input id="tf_barcode" modifier="underbar" placeholder="Barcode" float></ons-input></ons-list-item>
                            </div>
                            <div id="scann" class="right">
                                <ons-icon size="30px" icon="fa-barcode" class="list-item__icon"></ons-icon>
                            </div>
                        </ons-list-item>
                        <ons-list-item style="margin-top:-30px">
                            <div id="tf_color_fuellmenge" class="left">
                                Füllmenge:
                            </div>
                            <div class="center">
                                <ons-list-item><ons-input id="tf_fuellmenge" modifier="underbar" placeholder="Füllmenge" float></ons-input></ons-list-item>
                            </div>
                            <div class="right">
                                <ons-icon size="25px" style="color:#810000" icon="fa-trash" class="list-item__icon"></ons-icon>
                            </div>
                        </ons-list-item>

                    </ons-list>
                    </div>
                    <ons-list-item>
                        <div class="center" style="margin-left: 40%;">
                            <ons-icon id="add_barcode" icon="fa-plus-circle" class="list-item__icon"></ons-icon>
                        </div>

```javascript
    var counter = 0;

    function addBarcode() {



        var str = '<ons-list id="tf_barcode_nr';
        str += (++counter);
        str += '"style= "margin-top:5px"modifier="inset"><ons-list-item><div class="left">Bardcode:</div><div class="center" style="margin-left:10px;"><ons-list-item><ons-input id="tf_barcode" modifier="underbar" placeholder="Barcode" float></ons-input></ons-list-item></div><div id="scann" class="right"><ons-icon size="30px" icon="fa-barcode" class="list-item__icon"></ons-icon></div></ons-list-item><ons-list-item style="margin-top:-30px"><div id="tf_color_fuellmenge" class="left">Füllmenge:</div><div class="center"><ons-list-item><ons-input id="tf_fuellmenge" modifier="underbar" placeholder="Füllmenge" float></ons-input></ons-list-item></div><div class="right"><ons-icon id="tf_barcode_nr';
        str += counter;
        str += '" onClick="deleteBarcode(this.id)" size="25px" style="color:#810000" icon="fa-trash" class="list-item__icon"></ons-icon></ons-icon></div></ons-list-item></ons-list >';





        var d1 = document.getElementById('tf_after');
        d1.innerHTML += str;

    }