Jquery functions does not work on dynamic generated form component?

I'm using this jQuery function with jQuery UI to generate a datepicker when the user hits one textfield:

<script>
        $(function() {
        var dates = $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });
  </script>

As you can see it respond to the textfields from and to. The textfields are in my html code like:

<div class="clearfix">
            <label for="from">From</label>
            <input type="text" id="from" name="from" class="xlarge"/>
        </div>
        <div class="clearfix">
            <label for="to">开发者_如何学Pythonto</label>

At this point everything works. Later, in the same form a let the user to clone this form elements using this other code:

  $(document).ready(function() {
    var removeButton = '<a href="#" id="remove">remove</a>';
        $('#addl').click(function() {
        $('div.jobitems:last').after($('div.jobitems:first').clone());
        $('div.jobitems:last').append(removeButton);
         $('div.jobitems:last input').each(function(){
           this.value = ''; 
        });

    });
    $('#remove').live('click', function() {
        $(this).closest('div.jobitems').remove();
    });
  });
                <input type="text" id="to" name="to" class="xlarge"/>
            </div>

When the user clone the elements, the new ones do not respond to the function that generates the datepicker. I'm really confused about this. Here you can check the running code: http://domingo.net46.net/example/reg.php

You have to call the function that make the datapicker happen again after the append of the html elements so that the datepicker work on them because i can see that the datepicker function is called on the document ready and you have another function that append html element so you have to call the datepicker function right after you append the html elemnt.

$(DoAction);

function DoAction() {
        var dates = $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    }




$(document).ready(function() {
    var removeButton = '<a href="#" id="remove">remove</a>';
        $('#addl').click(function() {
        $('div.jobitems:last').after($('div.jobitems:first').clone());
        $('div.jobitems:last').append(removeButton);
         $('div.jobitems:last input').each(function(){
           this.value = ''; 
        });
            DoAction();

    });
    $('#remove').live('click', function() {
        $(this).closest('div.jobitems').remove();
    });
  });

The issue could be on the line that is as follows:

this.value = ''; 

Try changing this to become:

$(this).value = ''; 

Then it should work as it's creating a jQuery object

If the cloned elements have the same id as the originals, I'm not surprised that the datepicker will only act on the first elements it finds.