javascript - JQuery タイムピッカー

Question

私は JQuery Timepicker を使用しており、O が Timepicker を適用した動的フィールドを追加しています。ユーザーが両方のフィールドで時間を選択すると、自動的に時間数が時間単位で表示されるようにします。

これは時間フィールドの HTML で、ボタンをクリックしてフィールドを追加するボタンがあり、JavaScript のメソッドを呼び出してフィールドを追加します。

<label id="l" style="width:160px;">From</label>
<input name="from[]" id="tm1" class="l" type="text" size="15" height="5px" onblur="" value="" style="width:auto;"/>
<label id="l" style="width:20px;">To</label>
<input name="to[]"  id="tm" class="l" type="text" size="15" height="5px" onblur="" value="" style="width:auto;"/>
<label id="l" style="width:30px;">Hours</label>
<input name="hours[]" id="l" type="text" size="15" height="5px" onblur="" value="" style="width:auto;" readonly="readonly"/>
<input type="button" id="add_sch()" onclick="add_sch('add_sch')" name="btn" value="Add More!" /><br>

クローニング フィールド:

<div id="add_sch" style="display:none">
<label id="l" style="width:160px;">From</label>
<input name="from[]" class="tm"  type="text" size="15" height="5px" onblur="" value="" style=":Arial;font-weight:normal;font-size:11px;color:#7c7b77;outline: none;border: 1px solid #c7c7c7;margin:3px 5px;padding:8px 0;padding-left:5px;-moz-box-shadow: 0 0 5px #c7c7c7;-webkit-box-shadow: 0 0 5px #c7c7c7;box-shadow: 0 0 5px #c7c7c7;float:left;border-radius: 5px;"/>
<label id="l" style="width:20px;">To</label>
<input name="to[]" class="tm"  type="text" size="15" height="5px" onblur="" value="" style=":Arial;font-weight:normal;font-size:11px;color:#7c7b77;outline: none;border: 1px solid #c7c7c7;margin:3px 5px;padding:8px 0;padding-left:5px;-moz-box-shadow: 0 0 5px #c7c7c7;-webkit-box-shadow: 0 0 5px #c7c7c7;box-shadow: 0 0 5px #c7c7c7;float:left;border-radius: 5px;"/>
<label id="l" style="width:30px;">Hours</label>
<input name="hours[]" id="l" type="text" size="15" height="5px" onblur="" value="" style="width:auto;" readonly="readonly"/></div>

JavaScript:

var counter = 0;
function add_sch (FieldName) {
    counter++;
    var newFields = document.getElementById(FieldName).cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById(FieldName);
    insertHere.parentNode.insertBefore(newFields,insertHere);
    $(newFields).find('.tm').timepicker();
}