jquery time-entry issues when multiple fields occur

Question

I have two time entry fields and two date fields in a form. Also there is a add more button to add more rows like this. Time-entry plugin is not working from second row onwards.Code is given below:

<link href="styles.css" rel="stylesheet"  />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://www.jqueryscript.net/demo/jQuery-Plugin-for-Input-Field-Time-Format-Spinner-Time-Entry/jquery.timeentry.js"></script>
<link href="/css/jquery.timeentry.css" media="screen" rel="stylesheet" type="text/css" >


<script>
$(function () {

    var newRow = $(".addrows").clone();

    $(".datepicker").datepicker();
   $('.time').timeEntry({show24Hours: true, spinnerImage: '', defaultTime  : new Date()});
    $("#addButton").on("click", function () {

        newRow.clone().appendTo("#TextBoxesGroup tbody").find(".datepicker").datepicker();
    });



});

</script>
<table id="TextBoxesGroup">
<tr class="addrows">
<td>Start Time:</td>
<td>

<input type="text" name="StartTime" id="StartTime" value="" class="time">

<button name="starttimenow" id="starttimenow" type="button" onclick="var currentDate = new Date(); var hours = currentDate.getHours(); var minutes = currentDate.getMinutes(); if(hours < 10) { hours = &#39;0&#39; + hours; } if(minutes < 10) { minutes = &#39;0&#39; + minutes; } $(&#39;#StartTime&#39;).val(hours + &#39;:&#39; + minutes);">Now</button></dd>
</td>
<td>Start Date:</td>
<td><input type="text" name="StartDate[]"class="datepicker" value=""  autocomplete="off" size="6">
</td>
<td>End Time:</td>
<td>
<input type="text" name="EndTime" id="EndTime" value="" class="time">

<button name="endtimenow" id="endtimenow" type="button" onclick="var currentDate = new Date(); var hours = currentDate.getHours(); var minutes = currentDate.getMinutes(); if(hours < 10) { hours = &#39;0&#39; + hours; } if(minutes < 10) { minutes = &#39;0&#39; + minutes; } $(&#39;#EndTime&#39;).val(hours + &#39;:&#39; + minutes);">Now</button></dd>
</td>
<td>End Date:</td>
<td>
<input type="text" name="EndDate[]" class="datepicker" value="" autocomplete="off" size="6">
</td>
</tr>
</table>

<table>
    <tr>
        <td>
            <input type="button" id="addButton" value="+" />
        </td>

    </tr>
    </table>

I know I can change 'id' to 'class' in the lines:

<input type="text" name="StartTime" id="StartTime" value="" class="time">

<input type="text" name="EndTime" id="EndTime" value="" class="time">

But there will be two classes and also the time-entry plugin is not working properly.

Please help me to fix this. Thanks!

Answer 1

Your code does not instrument the time field in the newly added row. I suggest writing a function that instruments the elements in a container element (or elements). You can use that function to instrument the existing rows when the page loads, and you can use it again when adding a new row.

And you definitely need to avoid duplicate id values. As you mention in your question, you can use class attributes instead.

HTML:

<table id="TextBoxesGroup">
    <tr>
        <td>Start Time:</td>
        <td>
            <input type="text" name="StartTime[]" value="" class="time" />
            <button type="button" class="nowBtn">Now</button>
        </td>
        <td>Start Date:</td>
        <td>
            <input type="text" name="StartDate[]" value="" class="datepicker" autocomplete="off" size="6" />
        </td>
        <td>End Time:</td>
        <td>
            <input type="text" name="EndTime[]" value="" class="time" />
            <button type="button" class='nowBtn'>Now</button>
        </td>
        <td>End Date:</td>
        <td>
            <input type="text" name="EndDate[]" class="datepicker" value="" autocomplete="off" size="6" />
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <input type="button" id="addButton" value="+" />
        </td>
    </tr>
</table>

JavaScript:

$(function () {
    // This function instruments elements inside the container element.
    function instrument($containers) {
        $containers.find('.time').timeEntry({
            show24Hours: true,
            spinnerImage: '',
            defaultTime: new Date()
        });
        $containers.find('.datepicker').datepicker();
    }

    var $group = $('#TextBoxesGroup'),
        $rows = $group.find('tr'),
        $rowTemplate = $rows.first().clone();

    // Instrument the existing rows.
    instrument($rows);

    // Use event delegation to handle the "Now" button clicks.
    $group.on('click', '.nowBtn', function() {
        var now = new Date(),
            hours = ('0' + now.getHours()).slice(-2),
            minutes = ('0' + now.getMinutes()).slice(-2);
        $(this).parent().find('input').val(hours + ':' + minutes);
    });

    $('#addButton').click(function() {
        var $row = $rowTemplate.clone();
        $group.children('tbody').append($row);

        // Instrument the newly added row.
        instrument($row);
    });
});

You could also register the click handlers for the "Now" buttons in the instrument() function, but I chose to show how you can use event delegation instead.