Bizarre behavior involving Form, List, and Button

Question

The following code does not work, but if you uncomment the opening and closing HBox tags it does work.
By "work" I mean click the button and the default string should be added to the data provider and appear in the list.
Very strange.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      [Bindable] private var detailsAC:ArrayCollection = new ArrayCollection();
      private var addNewDetailPrompt:String = "click to add new details entry";
      private function addDetail():void{
        if(detailsAC.length == 0 || detailsAC.getItemAt(0) != addNewDetailPrompt){
          detailsAC.addItemAt(addNewDetailPrompt, 0);
    ]]>
  </mx:Script>
  <mx:Form>
    <mx:FormItem label="Event details:">
      <!--<mx:HBox>-->
        <mx:List id="detailsList" editable="true"
          dataProvider="{detailsAC}">
          <mx:itemRenderer>
            <mx:Component>
              <mx:TextArea text="{data}"/>
            </mx:Component>
          </mx:itemRenderer>         
        </mx:List>
        <mx:Button label="Add..." click="addDetail();"/>               
      <!--</mx:HBox>-->
    </mx:FormItem>
  </mx:Form> 
</mx:Application>

Answer 1

In the following code I have both cases represented. Are you saying that when you click both of the buttons in this application, the default string displays in the List? Flex 3.4
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="horizontal">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      [Bindable] private var detailsAC1:ArrayCollection = new ArrayCollection();
      [Bindable] private var detailsAC2:ArrayCollection = new ArrayCollection();
      private var addNewDetailPrompt:String = "click to add new details entry";
      private function addDetail1():void{
        if(detailsAC1.length == 0 || detailsAC1.getItemAt(0) != addNewDetailPrompt){
          detailsAC1.addItemAt(addNewDetailPrompt, 0);
      private function addDetail2():void{
        if(detailsAC2.length == 0 || detailsAC2.getItemAt(0) != addNewDetailPrompt){
          detailsAC2.addItemAt(addNewDetailPrompt, 0);
    ]]>
  </mx:Script>
  <mx:Form>
    <mx:FormItem label="Event details:">
      <!--<mx:HBox>-->
        <mx:List id="detailsList1" editable="true"
          dataProvider="{detailsAC1}">
          <mx:itemRenderer>
            <mx:Component>
              <mx:TextArea text="{data}"/>
            </mx:Component>
          </mx:itemRenderer>         
        </mx:List>
        <mx:Button label="Add..." click="addDetail1();"/>               
      <!--</mx:HBox>-->
    </mx:FormItem>
  </mx:Form> 
  <mx:Form>
    <mx:FormItem label="Event details:">
      <mx:HBox>
        <mx:List id="detailsList2" editable="true"
          dataProvider="{detailsAC2}">
          <mx:itemRenderer>
            <mx:Component>
              <mx:TextArea text="{data}"/>
            </mx:Component>
          </mx:itemRenderer>         
        </mx:List>
        <mx:Button label="Add..." click="addDetail2();"/>               
      </mx:HBox>
    </mx:FormItem>
  </mx:Form>   
</mx:Application>