Time Picker is not placed jquery appended on text box correctly

Question

I need to get store all event at each and every day those the Event times is captured by dialog div and i getting the start time and end time for each and every events per day but now the problems are

    1. Time picker is not placed at the correct text box its automatically changed please some one help me.
    2. I need to show time range i.e given gap for each and every events at half hour please help me friends.

MY CODE IN THIS LINK

http://jsbin.com/lixig/3/edit

Answer 1

Try this,

if ((self.offset().top + self.outerHeight(true) + list.outerHeight()) > $(window).height() + $(window).scrollTop()) {
    // position the dropdown on top
    list.offset({
        'left': self.offset().left+self.width() ,
        'top': self.offset().top - list.height()+ self.innerHeight()
    });
} else {
    // put it under the input
    list.offset({
        'left':self.offset().left +self.width(),
        'top': self.offset().top
    });
}

Working Demo