CSS is not applying on first click

Question

I have two calendars implemented in one page, but in two different popup boxes. These two calendars have two different CSS applied (eg 1.css, 2.css). I used jQuery to enable and disable a calendar in one of the popup boxes. Currently, I am getting new CSS applied when the calendar is open, and removed when the calendar is closed.

My issue is, on first click, it is first applying the old CSS, and after I close the calendar and click it again, then it's applying the new CSS.

Here is the code I used:

$('#inputField').datepicker({
 beforeShow: function(input, inst) {
        $('div#div1').append($('#ui-datepicker-div'));
        $('link[title=2-css]')[0].disabled=false;
    },
 onClose: function() {
        $('div#div2').append($('#ui-datepicker-div'));
        $('link[title=2-css]')[0].disabled=true;
    }
});

How can I fix this?

Answer 1

This issue has been resolved. Like I mentioned in my question, I have two calendars on same page with different css. Since, the both calendar has same component, there was namespace conflict. The reason I append datepicker to an empty div was to isolate one calendar with another. Aparently it did work but was not the 100% accurate. So, I changed the namespace of one calendar that is being used as class for css. This solved my problem.