Time picker Now button doesn't work

Question

I've a table

<table id="tbl1">
    <tr class="Row">
        <td class="TimeCol">
            <input title="" type="text" readonly="readonly" class="FromTime " />
        </td>
        <td class="TimeCol">
            <input title="" type="text" readonly="readonly" class="ToTime " />
        </td>
    </tr>
</table>

and i've an anchor tag on which i add new rows to table like this

<a href="#" onclick="javascript:return AddRow();">

Js:

$(document).ready(function () {
$('.FromTime, .ToTime').timepicker({
            timeFormat: "H:m:s",
            stepMinute: 01,
            ampm: true
        });
});
    function AddRow() {
        var $ttc = '';

        $ttc = $("#tbl1").find("tr:last");

        var $tr = $ttc.clone();

        // reset fields in the new row
        $tr.find("input[type=text]").val("");
        $tr.find(".FromTime").removeAttr('value');
        $tr.find(".ToTime").removeAttr('value');

        // add cloned row as last row
        $('#tbl1 tr:last').after($tr);


        // re-initialise the cloned timepickers:
        $fromTimepicker = $('#tbl1 tr:last').find('.FromTime,.ToTime');
        $fromTimepicker.removeClass("hasDatepicker");
        $fromTimepicker.timepicker({
            timeFormat: "H:m:s",
            stepMinute: 01,
            ampm: true
        });

        return false;
    }

Now when the new row is added and I click on Now button of timepicker, time is updated in the first row textbox... what is the problem and how it can be resolved?

Before Now click Image

After Now click Image

Update If i add timepicker to textbox using id then no timepicker is added

var fromId = $('#tbl1 tr:last').find('.FromTime').attr('id');
$('#'+fromId).removeClass("hasDatepicker");
$('#' + fromId).timepicker({
    timeFormat: "H:m:s",
    stepMinute: 01,
    ampm: true
});

Answer 1

You should initialize, timepicker on element ID rather than element class. When you clone a row to add a new row, the new row has the same class as the previous row. Since when you click on "Now" button on the timepicker widget, the timepicker uses class to select the input field and updates the time in the first input field it finds, which is the time field in the first row.

If you use unique ID on each input element, timepicker will update time in the correct element.

EDIT: Try the following change:

// re-initialise the cloned timepickers:
$('#tbl1 tr:last').find('.FromTime').attr('id', 'new_from').removeClass("hasDatepicker"); 
$('#tbl1 tr:last').find('.ToTime').attr('id', 'new_to').removeClass("hasDatepicker"); 
$('#new_from, #new_to').timepicker({
    timeFormat: "hh:mm tt",
    stepMinute: 01,
    ampm: true
});

Answer 2

This worked for me. I added removed id attribute and everything works fine.

I added this $fromTimepicker.removeAttr("id"); before initializing time picker like this

    $fromTimepicker = $('#tbl1 tr:last').find('.FromTime,.ToTime');
    $fromTimepicker.removeClass("hasDatepicker");
    $fromTimepicker.removeAttr("id");
    $fromTimepicker.timepicker({
        timeFormat: "H:m:s",
        stepMinute: 01,
        ampm: true
    });