以扩展形式调用Javascript函数

Question

我试图在表单的两个位置实现此datepicker函数/小工具。

https://eonasdan.github.io/bootstrap-datetimepicker/

第一个位置完全正常但是，第二个位置是由扩展形式函数创建的克隆形式，根本不加载。

我尝试将脚本放在不同的地方，但似乎无关紧要。我们是否需要一种特定的方法来调用克隆形式的js函数？

第一名（2个日期选择）：

<div class="row">   
    <div class="col-lg-2">
        <div class="form-group">
            <div class="input-group date datetimepicker">
                <input type="text" class="form-control" name="data[Condition][0][start]"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
    </div>
    <div class="col-lg-2">      
        <div class="form-group">
            <div class="input-group date datetimepicker">
                <input type="text" class="form-control" disabled id="click" name="data[Condition][0][end]"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
    </div>
</div>

第二个位置（另外2个），最后有2个js函数克隆表单并分别调用datepicker：

<span id="readroot2" style="display: none">
    <input class="btn btn-default" type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />

    <div class="row">   
        <div class="col-lg-2">
            <div class="form-group">
                <div class="input-group date datetimepicker">
                    <input type="text" class="form-control" name="start"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>   
        </div>
        <div class="col-lg-2">      
            <div class="form-group">
                <div class="input-group date datetimepicker">
                    <input type="text" class="form-control" disabled id="click" name="end"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>  
</span>
<span id="writeroot2"></span>       
<input class="btn btn-default" type="button" onClick="moreFields2()" value="Give me more fields!" />
<script>
    //Clone function
    var newcounter = 0;
    function moreFields2() {
        newcounter++;
        var newField = document.getElementById('readroot2').cloneNode(true);
        newField.id = '';
        newField.style.display = 'block';
        var newFields = newField.querySelectorAll('[name], [id], [for]');
            for (var i=0;i<newFields.length;i++) {
                var theNames = newFields[i].name
                if (theNames)
                    newFields[i].name = "data[Condition][" + newcounter + "][" + theNames + "]";
                var theNames2 = newFields[i].id;
                if (theNames2)
                    newFields[i].id = theNames2 + newcounter;
                var theNames3 = newFields[i].htmlFor;
                if (theNames3)
                    newFields[i].htmlFor = theNames3 + newcounter;      
            }           
        var insertHere = document.getElementById('writeroot2');
        insertHere.parentNode.insertBefore(newField,insertHere);
    }

    //Call datepicker
    $(function () {
        $('.datetimepicker').datetimepicker({
            format: 'LT'
        });
    });
</script>