jQuery Datepicker onClose select next

Question

I have a system where people can add multiple from and to dates ie screenshot:

On selecting the first date the onClose event sets the date for second input and opens it. IE

datePickers = function() {
    $(".from_date").datepicker({
      minDate: 'D',
      dateFormat: "dd/mm/yy",
      defaultDate: "+1w",
      numberOfMonths: 2,
      onClose: function(selectedDate) {
        $(".to_date").datepicker("option", "minDate", selectedDate);
        return $(".to_date").datepicker("show");
      }
    });
    return $(".to_date").datepicker({
      minDate: '+1D',
      dateFormat: "dd/mm/yy",
      defaultDate: "+1w",
      numberOfMonths: 2
    });
  };

My problem becomes when I have 2,3 or more and editing the first or second one.... On close it opens the last input.

I have tried using .next('to_date') and closest('to_date') but its not working.

Any advise on how I can get around this.

As requested a fiddle: http://jsfiddle.net/FdfPY/

Solution

Rather than using return $(".to_date").datepicker("show");, do the following:

$(".from_date").datepicker({
      minDate: 'D',
      dateFormat: "dd/mm/yy",
      defaultDate: "+1w",
      numberOfMonths: 2,
      onClose: function(selectedDate) {
        $(".to_date").datepicker("option", "minDate", selectedDate);
        $(this).parent().next().children().focus();
      }
    });
 $(".to_date").datepicker({
      minDate: '+1D',
      dateFormat: "dd/mm/yy",
      defaultDate: "+1w",
      numberOfMonths: 2
    });

DEMO: http://jsfiddle.net/FdfPY/1/

EDIT:

If it is nested, then use the following:

$(".from_date").datepicker({
      minDate: 'D',
      dateFormat: "dd/mm/yy",
      defaultDate: "+1w",
      numberOfMonths: 2,
      onClose: function(selectedDate) {
        $(".to_date").datepicker("option", "minDate", selectedDate);
        $(this).parents('.span2').next().children().find('.to_date').focus();
      }
    });
 $(".to_date").datepicker({
      minDate: '+1D',
      dateFormat: "dd/mm/yy",
      defaultDate: "+1w",
      numberOfMonths: 2
    });

DEMO: http://jsfiddle.net/FdfPY/5/

Comments

[Lee]

Sorry but I thought yours was going to work but in practice my elements are further nested in additional div's etc. So .parent will be to brittle. jsfiddle.net/FdfPY/2

[Lee]

Thanks DOM, I know im a major pain but my fiddle was made to simple. I should have given a better html layout. I thought initially it would have been easier to show in a table. jsfiddle.net/FdfPY/4 This is pretty acurate now for the layout. Sorry and TY for your time!!

[Dom]

No worries! Changed my post.

[Lee]

Dom your the man. I actually tried that but forgot the period on the span tag. TY ever so much !!!

[Dom]

No worries! let me know if you need anything else!

[Lee]

let us continue this discussion in chat