how to change z-index of datetimepicker on every click?

Question

I found that datetimepicker default z-index is 1 , but for my site I need a z-index of 9999 . I have changed the value with jquery in the click handler, however it only works on the first click. Successive clicks don't work. Why is this?

<td style="height: 40px;">
    <input type="text" class="datetimepicker" name="sdate" placeholder="Start Date" style="height: 39px; width: 260px;">             
</td>
<td style="height: 40px;">
    <input type="text" class="datetimepicker" name="edate" placeholder="End Date" style="height: 39px; width: 260px;">             
</td>

$(document).ready(function() {
    $('.datetimepicker').on('click', function(e) {
        e.preventDefault();
        $(this).datetimepicker({
            dateFormat: "yy-mm-dd",
            showTimezone: false,
            maskInput: true,
            timeFormat: "HH:mm:ss"
        }).focus();
        $('#ui-datepicker-div').css("z-index", 9999); //this is once time work
    });
});

Answer 1

try this in your css file;

#ui-datepicker-div {
    z-index: 99999 !important;
}

Answer 2

I have found something fixed code from http://xdsoft.net/ ,I just added destroy function is worked.

$(document).ready(function() {
$('.datetimepicker').on('click', function(e) {
    e.preventDefault();
    $(this).datetimepicker({
        dateFormat: "yy-mm-dd",
        showTimezone: false,
        maskInput: true,
        timeFormat: "HH:mm:ss"
    }).focus();
    $('#ui-datepicker-div').css("z-index", 9999); //this is once time work
    $(this).datetimepicker("destroy");//this is solved my problem
});

});