YUI Panel render not working as expected when using repeater components

hi there,

I have spent many hours on this and can't figure out why Visualforce has trouble with YUI Panel renders when using repeater components. Here is my isolated repro test case:

<apex:page controller="TestYUIC" tabStyle="Account" sidebar="false">

<apex:styleSheet value="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/skin.css" />
<apex:includeScript value="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" />
<apex:includeScript value="http://yui.yahooapis.com/2.6.0/build/container/container-min.js" />
<apex:includeScript value="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js" />

<script>

    YAHOO.namespace("force.com");

    YAHOO.force.com.showMe = function() {
        document.getElementById("myDialogPanel").style.display = "block";
        YAHOO.force.com.myDialog.show();
    }

    function passToShowMe(repeaterString)
    {
        passToController(repeaterString);
        var elementID = "DialogHere" + repeaterString;
        YAHOO.force.com.myDialog.render(document.getElementById(elementID));
        YAHOO.force.com.showMe();
    }

    YAHOO.force.com.hideMe = function() {
        YAHOO.force.com.myDialog.hide();
    }

    YAHOO.force.com.init = function() {
        document.body.className = document.body.className + " yui-skin-sam";

        YAHOO.force.com.myDialog = new YAHOO.widget.Panel(
            "myDialogPanel", // The id of our dialog container
            {
                    width           :   50,    // You can play with this until it's right
                    visible         :   false, // Should be invisible when rendered
                    draggable       :   true,   // Make the dialog draggable
                    close           :   false, // Don't include a close title button
                    modal           :   false,   // Make it modal
                    fixedCenter     :   false,   // Keep centered if window is scrolled
                    zindex          :   40,     // Make sure it's on top of everything
                    constraintoviewport    :    true,
            }
         );
    }

    YAHOO.util.Event.addListener(window, "load", YAHOO.force.com.init);
</script>

<apex:form id="MainForm">
<apex:repeat value="{!repeaterStrings}" var="s" id="StringRepeater">
        <input id="Button{!s}" type="button" class="btn"
                    onclick="passToShowMe('{!s}')"
                    value="{!s}" />
        <div id="DialogHere{!s}"></div>
        <apex:actionFunction name="passToController" action="{!DoSelect}" rerender="dialogPanel">
            <apex:param name="FruitSelection" value="" />
        </apex:actionFunction>
</apex:repeat>
</apex:form>

<apex:form >
<div id="myDialogPanel" style="display: none" >
     <apex:outputPanel id="dialogPanel" layout="block">
<div class="hd">
    <apex:outputText value="{!Fruit}" />
</div>
<div class="bd">
        <div style="text-align: center;" >
          <apex:commandButton value="Close" immediate="true" oncomplete="YAHOO.force.com.hideMe();"/>
        </div>
</div>
    </apex:outputPanel>
</div>
</apex:form>

</apex:page>

public class TestYUIC {

public List<String> repeaterStrings = new List<String>();
public String Fruit {get; set;}

      public TestYUIC()
      {
          repeaterStrings.add('Apple');
          repeaterStrings.add('Strawberry');
          repeaterStrings.add('Banana');
          repeaterStrings.add('Mango');
      }

      public void DoSelect()
      {
          Fruit = Apexpages.currentPage().getParameters().get('FruitSelection');

      }

      public List<String> getrepeaterStrings()
      {
          return repeaterStrings;
      }
}

Based on the view source of the page, the above code correctly generates a set of unique div tags intended for panel placements, eg. DialogHereApple, DialogHereStrawberry, and so on.

        <input class="btn" id="ButtonApple" onclick="passToShowMe('Apple')" type="button" value="Apple" />
        <div id="DialogHereApple"></div><script id="j_id0:MainForm:StringRepeater:0:j_id7" type="text/javascript">passToController=function(FruitSelection){A4J.AJAX.Submit('_viewRoot','j_id0:MainForm',null,{'similarityGroupingId':'j_id0:MainForm:StringRepeater:0:j_id7','parameters':{'j_id0:MainForm:StringRepeater:0:j_id7':'j_id0:MainForm:StringRepeater:0:j_id7','FruitSelection':FruitSelection||''} ,'actionUrl':'https://c.cs0.visual.force.com/apex/TestYUIP'} )};
</script>

        <input class="btn" id="ButtonStrawberry" onclick="passToShowMe('Strawberry')" type="button" value="Strawberry" />
        <div id="DialogHereStrawberry"></div><script id="j_id0:MainForm:StringRepeater:1:j_id7" type="text/javascript">passToController=function(FruitSelection){A4J.AJAX.Submit('_viewRoot','j_id0:MainForm',null,{'similarityGroupingId':'j_id0:MainForm:StringRepeater:1:j_id7','parameters':{'j_id0:MainForm:StringRepeater:1:j_id7':'j_id0:MainForm:StringRepeater:1:j_id7','FruitSelection':FruitSelection||''} ,'actionUrl':'https://c.cs0.visual.force.com/apex/TestYUIP'} )};
</script>

The page simply displays 4 buttons on load. I expect a dialog to render right after each button depending on the button I click on (because each button has an unique div tag after it for rendering). However, when clicking on the buttons, the panel always renders after the first button I click on ...

Say I click on the button for Mango first, the panel renders in the DialogHereMango div tag, but then if I click on the Apple button, the panel still renders in the DialogHereMango div tag. If I put an alert tag after the line var elementID = "DialogHere" + repeaterString; in the passToShowMe function, it correctly shows the elementID passed on to the render method for each click.

Any YUI/VF experts out there who can help shed some light on why the YUI panel does not render in the targeted div tag when using apex:repeater component?

thanks,