Why dynamic input fields don't take values?

I am adding rows using java script functions by taking input and showing data into input text fields.

I am using this datepicker https://github.com/T00rk/bootstrap-material-datetimepicker.

When I input time the only first value of time is copied into input fields while rest two value are copied but time value is not copied.

<div style="width:90%;margin:auto;">
<h1>Simple example of dynamically adding rows with jQuery</h1>

<form method="post">
<div id="itemRows">

Item quantity: <input type="text" name="add_qty" size="4" /> Item name: <input type="text" name="add_name" />Time:<input type="text" id="time" name="time"   />



(This row will not be saved unless you click on "Add row" first)

<input onclick="addRow(this.form);" type="button" value="Add row" /> 

    </div>

    <p><input type="submit" name="ok" value="Save Changes"></p>
</form>

<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'">Item quantity: <input type="text"        name="qty[]" size="4" value="'+frm.add_qty.value+'">Time<input type="text" id="time" name="time[]" size="4" value="'+frm.time.value+'" > Item name: <input type="text" name="name[]" value="'+frm.add_name.value+'"><input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
frm.time.value = '';
}

function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>