jquery creating repeteable inner divs dynamically
<p>this is a little bit complicated question. I want to achieve the following behaviour (creating sections dynamically): I'm sending the whole example: E.g. I have parent div and child div inside this parrent. In each div can be some placed some controls (inputs, buttons,...). I have following requirements:</p>

<ol>
<li>each section can be repeteable (i mean creating it dynamically) max times (maxRepetition)</li>
<li>sections can be nested inside another section (in this example there are only two levels of immersion: parent->child, but it can be also parent->child1->child2->...) and each of these sections must accept requirement 1.</li>
</ol>

<p>I have spend a lot of time how to achieve this, but not sucesfully. If somebody can help me I will very gratefull.</p>

<pre><code>&lt;html&gt;&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; 
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;     
&lt;/script&gt;       

&lt;style type="text/css"&gt;
      .border
      {
        border-style:solid;
        border-width:1px;
        border-color:black; 
      }      
&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;div id="main"&gt;   
&lt;div id="parent"&gt; 
    &lt;table class="border" width=300&gt;
        &lt;tbody&gt;
            &lt;tr&gt;                    
                &lt;td&gt;
                    &lt;span&gt;&lt;input id="field1" type="text" width="100"&gt;&lt;/span&gt;
                    &lt;p&gt;
                    &lt;div id="child" &gt;
                        &lt;table class="border" width=200&gt;
                            &lt;tbody&gt;
                                &lt;tr&gt;                    
                                    &lt;td&gt;
                                        &lt;span&gt;&lt;input id="field2" type="text" width="100"&gt;&lt;/span&gt;
                                        &lt;p&gt;
                                    &lt;/td&gt;
                                &lt;/tr&gt;
                            &lt;/tbody&gt;
                        &lt;/table&gt;            
                    &lt;/div&gt;  

                    &lt;span id="addSection_child"  onClick="addSection('child', 2)"&gt;Add&lt;/span&gt;
                    &lt;span id="removeSection_child" onClick="removeSection('child', this)"&gt;Remove&lt;/span&gt;

                    &lt;p&gt;     
                                                                                    &lt;/td&gt;                                                                   
            &lt;/tr&gt;         
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
&lt;span id="addSection_parent"  onClick="addSection('parent', 2)"&gt;Add&lt;/span&gt;
&lt;span id="removeSection_parent" onClick="removeSection('parent', this)"&gt;Remove&lt;/span&gt;

&lt;/div&gt;      

&lt;script type="text/javascript"&gt;

   function addSection(layoutRowId, maxRepetition) 
   {    
        var parentDivId = $("#" + layoutRowId).parent().closest('div').attr("id");                                      
        var sectionCount = $("div#" + parentDivId + " div[id = " + layoutRowId + "]").length;   

        if (sectionCount &gt; maxRepetition)       
            return;

        var layoutRowIdSelector = "#" + layoutRowId;
        $(layoutRowIdSelector).prepend('&lt;/p&gt;').clone().insertAfter(layoutRowIdSelector);                    
   }


   function removeSection(layoutRowId, currentDiv) 
   {                            
        var parentDivId = $(currentDiv).parent().closest('div').attr("id");

        var sectionCount = $("div#" + parentDivId + " div[id ^= " + layoutRowId + "]").length;  

        if (sectionCount == 1)                              
            return;                     

        var sectionToBeRemovedId = $("#" + parentDivId + " div").filter(":last");

        sectionToBeRemovedId.remove();              
   }


&lt;/script&gt;       
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
