jquery datepicker not working properly with js.erb views in ruby on rails

Question

Hi i have two js.erb views, namely new.js.erb and edit.js.erb with both use a form partial to be rendered in a dialog box. Two of the fields in the form are start date and end date to which i have added the datepicker from jquery ui as shown below
$("#event_startDate").datepicker({dateFormat: 'yy-mm-dd'});
$("#event_endDate").datepicker({dateFormat: 'yy-mm-dd'});

These two lines have been placed at the bottom of both the edit.js.erb and new.js.erb file because placing it in application.js is not working.
When i view my application datepicker shows up only for whichever link i click first. That is, if i create a new event then datepicker works for start date and end date, but if i try to edit an event after then datepicker does not show. This actually holds true for all the javascript i have in these views. a copy of the new.js.erb file and edit.js.erb are shown below. Any ideas would be appreciated.

NEW.JS.ERB

 $("#create_event").html("<%= escape_javascript(render(:partial => 'form')) %>");

$('#create_event_dialog').dialog({
        title: 'New Event',
        modal: true,
        width: 500,
                close: function(event, ui) { $('#create_event_dialog').dialog('destroy') },
                buttons: {
                    'Cancel': function() {
                                    $(this).dialog('close');
                            }
                }

    });

$.validator.addMethod("endDateGreater", function(value,element,params){
    var startDate = new Date($('#event_startDate').val());
    var endDate = new Date($('#event_endDate').val());
    return this.optional(element) || endDate >= startDate;
}, jQuery.format("End Date Must Be Greater Than Start Date"));

$("#new_event").validate({    
    rules: {
    "event[name]": {required: true},
    "event[startDate]": {required: true},
    "event[endDate]": {required: true, endDateGreater : true},
    "event[startTime]": {required: true},
    "event[endTime]": {required: true},
    "event[supporter_id]": {required: true},

    }
});
$("#event_startDate").datepicker({dateFormat: 'yy-mm-dd'});
$("#event_endDate").datepicker({dateFormat: 'yy-mm-dd'});

EDIT.JS.ERB

    $("#event_desc").html("<%= escape_javascript(render(:partial => 'form')) %>");

$.validator.addMethod("endDateGreater", function(value,element,params){
    var startDate = new Date($('#event_startDate').val().slice(0,10));
    var endDate = new Date($('#event_endDate').val().slice(0,10));
    return this.optional(element) || endDate >= startDate;
}, jQuery.format("End Date Must Be Greater Than Start Date"));

$("body#index.events form").validate({    
    rules: {
    "event[name]": {required: true},
    "event[startDate]": {required: true},
    "event[endDate]": {required: true, endDateGreater: true},
    "event[startTime]": {required: true},
    "event[endTime]": {required: true},
    "event[supporter_id]": {required: true},
    }
});
$("#event_startDate").datepicker({dateFormat: 'yy-mm-dd'});
$("#event_endDate").datepicker({dateFormat: 'yy-mm-dd'});