Problem: Dynamically add rich text

Question

Hello to all,
in advance sorry for my bad english,
I have major problem and trying to solve it... for days...
In basic, i want to add RichEditableText or TextArea in runtime, and have ability to bold, italic, change color,size, drag it etc. and change default text
If anyone have any idea or solution i would be veery thankful
This is my idea;
Code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"  >
    <fx:Script>
        <![CDATA[
            import spark.components.RichEditableText;
            [Bindable]public var selID:int;
            public var newID:int = new int(0)
            public var ret:RichEditableText;
            public var retTemp:RichEditableText;
            protected function theClick(event:Event):void{
                selID = event.target.id      
            protected function btnAdd_clickHandler(event:MouseEvent):void{
                ret = new RichEditableText;
                ret.text = "Rich Text"
                ret.id = newID.toString()
                ret.addEventListener(MouseEvent.CLICK,theClick)
                hBox.addElementAt(ret,newID);
                newID++
            protected function btnBold_clickHandler(event:MouseEvent):void{
                retTemp = hBox.getElementAt(selID) as RichEditableText
                retTemp.setStyle("fontWeight","bold");
                hBox.addElementAt(retTemp,selID);
            protected function btnItalic_clickHandler(event:MouseEvent):void{
                retTemp = hBox.getElementAt(selID) as RichEditableText
                retTemp.setStyle("fontStyle","italic");
                hBox.addElementAt(retTemp,selID);
        ]]>
    </fx:Script>
    <mx:Label x="10" y="24" text="Selected ID: {selID.toString()}" id="idTxt"/>
    <mx:HBox x="10" y="53" width="565" height="44" id="hBox"  verticalAlign="middle">
    </mx:HBox>
    <s:Button x="10" y="117" label="Add" id="btnAdd" click="btnAdd_clickHandler(event)"/>
    <s:Button x="193" y="117" label="Italic" id="btnItalic" click="btnItalic_clickHandler(event)" />
    <s:Button x="115" y="117" label="Bold" id="btnBold" click="btnBold_clickHandler(event)"/>
</s:Application>
App works while "RichEditableText" text stays Rich Text, if you change text, it has no more ID

Answer 1

... I've searched CookBook
For the App that I am trying to build, I need add RichText that have his own unique ID.
If I use Canvas, Label,Button etc... in above code (replacing RichEditableText) it works fine but,
in this case problem is when I change RichEditableText text, in this case "Rich Text", it's ID just vanish.
... if I setStyle ID remains
If you have any specific solution other than "search CookBook"...please post it...
Thanks in advance,
PS:
I've tried with
   import mx.core.UIComponent
   protected var uiComp:UIComponent
   protected function theClick(event:Event):void{
           uiComp = UIComponent(event.target)
           selID = uiComp.id     
... and so on
... problem still remains