Issue in generating markup

Hi All,

I am new to CK-Editor and need to customize image selection dialog to add caption text field, and generate below given markup on selection of image :

<div class='image'>

            <img ...>

            <div class='image-caption'>Image Caption Text</div>

</div>

I have successfully added caption text field to image selection dialog, but facing issue's with generating markup.

When I add two images I am getting incorrect markup as given below :

<div class="image">

            <img ..../>

            <div class"image-caption">Caption 1

                     <div class="image">
                            <img.... />
                             <div class="image-caption">Caption 2</div>
                      </div>
            </div>
</div>

Expected Output : 

  <div class="image">
                            <img.... />
                             <div class="image-caption">Caption 1</div>
   </div>

  <div class="image">
                            <img.... />
                             <div class="image-caption">Caption 2</div>
   </div>

onOk Handler :

 onOk: function () 

                {
                    var D = this;
                    
                    if (D.imageEditMode) 
                    {
                        var C = D.imageEditMode;
                        
                        if (c == 'image' && C == 'input' && confirm(b.lang.image.button2Img)) 
                        {
                            C = 'img';
                            D.imageElement = b.document.createElement('img');
                            D.imageElement.setAttribute('alt', '');
                            b.insertElement(D.imageElement);
                        }
                        else if (c != 'image' && C == 'img' && confirm(b.lang.image.img2Button)) 
                        {
                            C = 'input';
                            D.imageElement = b.document.createElement('input');
                            D.imageElement.setAttributes({
                                type: 'image',
                                alt: ''
                            });
                            
                            b.insertElement(D.imageElement);
                        } 
                        else 
                        {
                            D.imageElement = D.cleanImageElement;
                            delete D.cleanImageElement;
                        }
                    }
                   
                    else 
                    {
                        if (c == 'image')
                        {
                            D.imageElement = b.document.createElement('img');
                        }
                        else
                        {
                            D.imageElement = b.document.createElement('input');
                            D.imageElement.setAttribute('type', 'image');
                        }
                        
                        D.imageElement.setAttribute('alt', '');
                    }
                    
                    
                    if (!D.linkEditMode) 
                    {
                        D.linkElement = b.document.createElement('a');
                    }
                    
                    D.commitContent(d, D.imageElement);
                    D.commitContent(e, D.linkElement);
                    
                    //Customization start
                    var data = {};
                    D.commitContent('caption-value',null,data);
                    
                    var mainDivElement = b.document.createElement('div');
                    mainDivElement.setAttribute('class','image');
                    
                    var captionDivElement = b.document.createElement('div');
                    
                    if(data.captionValue != null)
                    {
                        captionDivElement.setAttribute('class','image-caption');
                        captionDivElement.appendText(data.captionValue);
                    }
                  //Customization end

                    if (!D.imageElement.getAttribute('style'))
                    {
                        D.imageElement.removeAttribute('style');
                    }
                    
                    if (!D.imageEditMode) 
                    {
                        if (D.addLink) 
                        {
                            if (!D.linkEditMode) 
                            {
                                b.insertElement(D.linkElement);
                                D.linkElement.append(D.imageElement, false);
                            }
                            else
                            {
                                b.insertElement(D.imageElement);
                            }
                        } 
                        else
                        {

                            //Customized
                            mainDivElement.append(D.imageElement);
                            mainDivElement.append(captionDivElement);
                            b.insertElement(mainDivElement);
                        }
                    } 
                    else if (!D.linkEditMode && D.addLink) 
                    {
                        b.insertElement(D.linkElement);
                        D.imageElement.appendTo(D.linkElement);
                    } 
                    else if (D.linkEditMode && !D.addLink) 
                    {
                        b.getSelection().selectElement(D.linkElement);
                        b.insertElement(D.imageElement);
                    }
                   
                },

Caption Element Commit Function :

  {
                        id: 'txtCaption',
                        type: 'text',
                        label: 'Caption',
                        accessKey: 'C',
                        onChange: function () {
                            l(this.getDialog());
                        },
                        setup: function (C, D) {
                            this.setValue(D.getAttribute('caption'));
                        },
                        commit: function (C,D,data)
                        {
                              var E = this;
                              
                              if(C == "caption-value")
                              {
                                  data.captionValue = E.getValue();
                              }
                              
                              if (C == d) 
                              {
                                  if (E.getValue() || E.isChanged())
                                  {
                                      D.setAttribute('caption', E.getValue());
                                  }
                              } 
                              else if (C == f) 
                              {
                                  D.setAttribute('caption', E.getValue());
                              }
                              else if (C == g)
                              {
                                  D.removeAttribute('caption');
                              }
                        }
             }

Please let me know possible solution or suggestion to solve this issue.

Thanks !

Faizaan Shaikh.