How can I control which elements are selected for alsoResize?

How can I control which elements are selected for alsoResize?

I'm building a page which has several resizable elements.  Each element has an overlay, which should resize with the element.  I'm having trouble figuring out how to do this.

The structure is basically ('x' is the id of the div, in most cases this is a number):
  1. <div id="x" class="resizable">
  2.  <div id="overlay_x" class="overlay">Overlay content</div>
  3.  Div content
  4. </div>

To set them up, I tried:

  1.    var reposition = '';
  2.    $(function() {
  3.      $( ".resizable" ).resizable({
  4.        containment: "#viewPage",
  5.        alsoResize: ".overlay",
  6.        autoHide: true,
  7.        resize: function(event, ui){
  8.         reposition = ui.position;
  9.       }
  10.      });
  11.    });

But this made all the overlays on the page resize when any div was resized.

Then I tried:

  1.    // Set up resizable elements
  2.    var reposition = '';
  3.    $(function() {
  4.      $( ".resizable" ).resizable({
  5.        containment: "#viewPage",
  6.        autoHide: true,
  7.        resize: function(event, ui){
  8.          reposition = ui.position;
  9.        }
  10.      });
  11.    });
  12.    $(".resizable").each(function(index) {
  13.      var thisId = this.id;
  14.      var overlayId = 'overlay_'+thisId;
  15.      $("#"+thisId).resizable( "option", "alsoResize", overlayId )
  16.    });

And now the overlay isn't syncronised at all.

Can someone tell me the proper way to do this, or explain what I'm doing wrong?  Basically, I only want to syncronise the overlay which is a child element of the one being resized.

Thanks!