title: Dynamically adding extra row into jquery accordion
body: <p>I would like to have some question how to control accordion dynamically.</p>
  
  <p>when click add button I supposed to add one more row sub accordion and 
  click remove button will remove last row of accordion.</p>
  
  <p>then I have a question how to control this.</p>
  
  <p>My source code as below.</p>
  
  <p>JS : </p>
  
  <pre><code>$("#addResolution").click(function (e) {
      alert("Add new resolution. ");
  });
  
  $("#removeResolution").click(function (e) {
      alert("Remove new resolution. ");
  });
  
  
                  &lt;h3&gt;&lt;a href="#" class="editor-label"&gt;
                      @Html.LabelFor(model =&gt; model.Resolution)
                  &lt;/a&gt;&lt;/h3&gt;
                  &lt;div&gt;
                      &lt;button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" id="addResolution"&gt;
                          &lt;span class="ui-button-text"&gt;ADD&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" id="removeResolution"&gt;
                          &lt;span class="ui-button-text"&gt;DEL&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;div id="accordionSub"&gt;
                          &lt;h3&gt;&lt;a href="#" class="editor-label"&gt;
                               @Html.LabelFor(model =&gt; model.Resolution)
                          &lt;/a&gt;&lt;/h3&gt;
                          &lt;div class="editor-field"&gt;    
                              @Html.EditorFor(model =&gt; model.Resolution,
                              new
                              {
                                  style = "width:" + 100 + "%; height:" + 5 + "em;"
                              }) 
                              @Html.ValidationMessageFor(model =&gt; model.Resolution)
  
                              &lt;br /&gt;
                              &lt;label id="lblFileUploadResolution"&gt;Choose Image File&lt;/label&gt;
                              &lt;input type="file" name="uploadFile" id="fileToUploadResolution" style="width:89%;" accept="image/png, image/gif, image/jpeg, image/bmp" /&gt;
                              &lt;input type="button" id="btnFileUploadResolution" value="Upload" style="width:10%;" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>When I click Add button dynamically add one more column and increase accordion sub id (example : accordian1, accordian2, accordian3)</p>
  
  <p>and click remove button then delete last row.</p>
  
  <p>Please help me thank you !</p>