Adding extra information to the page after each selection using Javascript

Ah, so there is a parameter... However, it doesn't seem to be an array of settings, but instead it's an Object of type change-hierarchical-select. From what I can tell, this appears to be the hierarchical-select-0-wrapper element, rather than the actual select element that triggered the event. This is making it a little difficult to work with, since the only way I can find of getting the selectedIndex of the select element that caused the event is by working my way down the child nodes until I get to the penultimate one... Must be a better way...

OK, I got it. There are actually 3 paramaters that get passed to the event:

  Drupal.HierarchicalSelect.triggerEvents(hsid, updateType, settings);

So what I needed was:

  $('#hierarchical-select-'+hsid+'-wrapper')
    .bind('change-hierarchical-select', function(hsid, updateType, settings) {
      var selectedTermTid = $('#' + settings.select_id).val();
      // Do a callback to the server to obtain more information about the selected term, by using the tid we just detected.
      var info = $doAjaxCallbackToGetInfoAboutThisTerm(selectedTermTid);
  
      $('#hierarchical-select-'+hsid+'-wrapper .hierarchical-select').append(info);
    });

Now, the problem I have now is that HS rebuilds the form elements each time a select is made, so any edits I make get lost when a new select is made. As far as I can tell, this is because the HS Ajax callback is calling drupal_prepare_form() and drupal_render() to rebuild the form - but I'm not really sure how this works. Any pointers as to how I can get my edits to stick between selects?

OK, I'm not actually trying to edit the selects. I'm trying to insert text between the selects. I want it so that when you choose an option from the first select, some text about the selection should appear below the first select. Then, after choosing a selection from the second select, some text about that selection should then be inserted just below the second select (with the extra text I added from the first select remaining betwee the first and second select). I currently have two problems:

1. The extra text I added from the first select should remain on screen after making a selection from the second select - likewise, after making a selection from the third select, the extra text from the first 2 selects should remain on screen. At the moment, all my extra text from previous selections gets removed each time a new selection is made - I think due to the way HS rebuilds the form element.
2. Ideally, I would like to use the before-change-hierarchical-select, so that the text is displayed before the HS animation. However, if I do this, what happens is that the text briefly appears on screen, only to disappear again instantly. As far as I can tell, this is also due to the way the HS rebuilds the form element from scratch in it's Ajax callback.

Now I have two ideas about how to solve it: Either, I maintain my own cache and insert all my bits of text in to the relevant places each time a new selection is made. Or, I somehow use form_alter in my Ajax callback to alter the form itself - although I don't think this is going to work, again due to the way that HS dynamically builds the select elements.

No, I didn't. I ended up just using one static dev on the page, and replacing the entire content of the div each time a selection is made. This doesn't give the effect I was after, but it'll do for now. Some help would be really appreciated if you have the time.

here is my working example:
http://www.geminicourses.com/book-now

Still not working how I originally intended, but it's good enough.