Persist child selector when selected parent has changed

[rapee]

Data with the same data structure often be kept linearly in an array or object.
And when looking at such data, people tend to move from one to the next item and compare the difference.

For example, when user select data[0].properties.coords, he will see 3 panes.
And then he select data[1]. Instead of showing only 2 panes (data[1] and data[1].properties), it would make much better sense if the third pane kept opened, as one would select data[1].properties.coords.

Note that it makes sense only if those data has the same data structure.

var data = [
  {
    name: 'Bangkok',
    properties: {
      time: '+0700',
      coords: '15 00 N, 100 00 E'
    }
  },
  {
    name: 'Tokyo',
    properties: {
      time: '+0900',
      coords: '36 00 N, 138 00 E'
    }
  }
];

Psuedocode

On select item
  prev <= previous selected item
  cur <= newly selected item
  parent <= first common parent to prev and cur
  prev_base <= path to prev with parent and next level component removed
  if (cur + prev_base) exists
    focus cur + prev item with cur selected
  else
    focus and select cur