generate dynamic HTML in symfony2
===

I am designing a dynamic form builder using symfony2. In form builder I have render a twig file which contains different buttons for text field, textarea, email id etc. when i click on any button then it displays that field in one <div>. Finally I want to render this complete HTML of this view in one action. how can I do this ???

the html of the the form builder is as follow:



    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Dynamic Form Builder</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
    
        <link href="{{ asset('bundles/Dynamic/rohit.css')}}" rel="stylesheet">
        <style>
          body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
            padding-bottom: 10px;
          }
          #components{
            min-height: 600px;
          }
          #target{
            min-height: 200px;
            border: 1px solid #ccc;
            padding: 5px;
          }
          #target .component{
            border: 1px solid #fff;
          }
          #temp{
            width: 500px;
            background: white;
            border: 1px dotted #ccc;
            border-radius: 10px;
          }
    
          .popover-content form {
            margin: 0 auto;
            width: 213px;
          }
          .popover-content form .btn{
            margin-right: 10px
          }
          #source{
            min-height: 500px;
          }
        </style>
      
      </head>
    
      <body>
    
        <div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              </a>
             
            </div>
          </div>
        </div>
        <div class="container">
          <div class="row clearfix">
            <div class="span6">
              <div class="clearfix">
                <h2>Dynamic Form Generator....</h2>
                <hr>
                <div id="build">
                  <form id="target" class="form-horizontal" method="post" action="{{ path('task_new') }}">
    			  <div id="formsub">
                    <fieldset>
                      <div id="legend" class="component" rel="popover" title="Form Title" trigger="manual"
                        data-content="
                        <form class='form'>
                          <div class='controls'>
                            <label class='control-label'>Title</label> <input class='input-large' type='text' name='title' id='text'>
                            <hr/>
                            <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                          </div>
                        </form>"
                        >
                        <legend class="valtype" data-valtype="text">Form Name</legend>
                      </div>
                    </fieldset>
    				</div>
    				
                 
                </div>
              </div>
    		  <center><button class='btn btn-info' name="submit" onclick="onsub()">Save</button></center> </form>
    		  
    <div id="rohit"></div>
            </div>
            <div class="span6">
                <h2>Drag & Drop components</h2>
                <hr>
              <div class="tabbable">
                <ul class="nav nav-tabs" id="navtab">
                  <li class="active"><a href="index.php#1" data-toggle="tab">Input</a></li>
                  <li class><a href="index.php#2" data-toggle="tab">Select</a></li>
                  <li class><a href="index.php#3" data-toggle="tab">Checkbox / Radio</a></li>
                  <li class><a href="index.php#4" data-toggle="tab">File / Button</a></li>
                  <li class><a id="sourcetab" href="index.php#5" data-toggle="tab">Generated Source</a></li>
                </ul>
                <form class="form-horizontal" id="components">
                  <fieldset>
                    <div class="tab-content">
    
                      <div class="tab-pane active" id="1">
    
                        <div class="control-group component" data-type="text" rel="popover" title="Text Input" trigger="manual"
                          data-content="
                          <form class='form'>
                            <div class='controls'>
                              <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                              <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
                              <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
                              <hr/>
                              <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                            </div>
                          </form>"
                          >
    
                          <!-- Text input-->
                          <label class="control-label valtype" for="input01" data-valtype='label'>Text input</label>
                          <div class="controls">
                            <input type="text" placeholder="placeholder" class="input-xlarge valtype" data-valtype="placeholder" >
                            <p class="help-block valtype" data-valtype='help'>Supporting help text</p>
                          </div>
                        </div>
                        <div class="control-group component" rel="popover" title="Search Input" trigger="manual"
                          data-content="
                          <form class='form'>
                            <div class='controls'>
                              <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                              <hr/>
                              <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                            </div>
                          </form>"
                          >
    
                          <!-- Textarea -->
                          <label class="control-label valtype" data-valtype="label">Textarea</label>
                          <div class="controls">
                            <div class="textarea">
                                  <textarea type="" class="valtype" data-valtype="checkbox" /> </textarea>
                            </div>
                          </div>
                        </div>
    
                      </div>
    
                      <div class="tab-pane" id="2">
    
                        <div class="control-group component" rel="popover" title="Search Input" trigger="manual"
                          data-content="
                          <form class='form'>
                            <div class='controls'>
                              <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                              <label class='control-label'>Options: </label>
                              <textarea style='min-height: 200px' id='option'> </textarea>
                              <hr/>
                              <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                            </div>
                          </form>"
                          >
    
                          <!-- Select Basic -->
                          <label class="control-label valtype" data-valtype="label">Select - Basic</label>
                          <div class="controls">
                            <select class="input-xlarge valtype" data-valtype="option">
                              <option>Enter</option>
                              <option>Your</option>
                              <option>Options</option>
                              <option>Here!</option>
                            </select>
                          </div>
    
                        </div>
    
                        <div class="control-group component" rel="popover" title="Search Input" trigger="manual"
                          data-content="
                          <form class='form'>
                            <div class='controls'>
                              <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                              <label class='control-label'>Options: </label>
                              <textarea style='min-height: 200px' id='option'></textarea>
                              <hr/>
                              <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                            </div>
                          </form>"
                          >
    
                          <!-- Select Multiple -->
                          <label class="control-label valtype" data-valtype="label">Select - Multiple</label>
                          <div class="controls">
                            <select class="input-xlarge valtype" multiple="multiple" data-valtype="option">
                              <option>Enter</option>
                              <option>Your</option>
                              <option>Options</option>
                              <option>Here!</option>
                            </select>
                          </div>
                        </div>
    
                      </div>
    
                      <div class="tab-pane" id="3">
    
                        <div class="control-group component" rel="popover" title="Multiple Checkboxes" trigger="manual"
                          data-content="
                          <form class='form'>
                            <div class='controls'>
                              <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                              <label class='control-label'>Options: </label>
                              <textarea style='min-height: 200px' id='checkboxes'> </textarea>
                              <hr/>
                              <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                            </div>
                          </form>"
                          >
                          <label class="control-label valtype" data-valtype="label">Checkboxes</label>
                          <div class="controls valtype" data-valtype="checkboxes">
    
                            <!-- Multiple Checkboxes -->
                            <label class="checkbox">
                              <input type="checkbox" value="Option one">
                              Option one
                            </label>
                            <label class="checkbox">
                              <input type="checkbox" value="Option two">
                              Option two
                            </label>
                          </div>
    
                        </div>
    
                        <div class="control-group component" rel="popover" title="Multiple Radios" trigger="manual"
                          data-content="
                          <form class='form'>
                            <div class='controls'>
                              <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                              <label class='control-label'>Group Name Attribute</label> <input class='input-large' type='text' name='name' id='name'>
                              <label class='control-label'>Options: </label>
                              <textarea style='min-height: 200px' id='radios'></textarea>
                              <hr/>
                              <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                            </div>
                          </form>"
                          >
                          <label class="control-label valtype" data-valtype="label">Radio buttons</label>
                          <div class="controls valtype" data-valtype="radios">
    
                            <!-- Multiple Radios -->
                            <label class="radio">
                              <input type="radio" value="Option one" name="group" checked="checked">
                              Option one
                            </label>
                            <label class="radio">
                              <input type="radio" value="Option two" name="group">
                              Option two
                            </label>
                          </div>
    
                        </div>
    
                        <div class="control-group component" rel="popover" title="Inline Checkboxes" trigger="manual"
                          data-content="
                          <form class='form'>
                            <div class='controls'>
                              <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                              <textarea style='min-height: 200px' id='inline-checkboxes'></textarea>
                              <hr/>
                              <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                            </div>
                          </form>"
                          >
                          <label class="control-label valtype" data-valtype="label">Inline Checkboxes</label>
    
                          <!-- Multiple Checkboxes -->
                          <div class="controls valtype" data-valtype="inline-checkboxes">
                            <label class="checkbox inline">
                              <input type="checkbox" value="1"> 1
                            </label>
                            <label class="checkbox inline">
                              <input type="checkbox" value="2"> 2
                            </label>
                            <label class="checkbox inline">
                              <input type="checkbox" value="3"> 3
                            </label>
                          </div>
    
                        </div>
    
                        <div class="control-group component" rel="popover" title="Inline radioes" trigger="manual"
                          data-content="
                          <form class='form'>
                            <div class='controls'>
                              <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                              <label class='control-label'>Group Name Attribute</label> <input class='input-large' type='text' name='name' id='name'>
                              <textarea style='min-height: 200px' id='inline-radios'></textarea>
                              <hr/>
                              <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                            </div>
                          </form>"
                          >
                          <label class="control-label valtype" data-valtype="label">Inline radios</label>
                          <div class="controls valtype" data-valtype="inline-radios">
    
                            <!-- Inline Radios -->
                            <label class="radio inline">
                              <input type="radio" value="1" checked="checked" name="group">
                              1
                            </label>
                            <label class="radio inline">
                              <input type="radio" value="2" name="group">
                              2
                            </label>
                            <label class="radio inline">
                              <input type="radio" value="3">
                              3
                            </label>
                          </div>
                        </div>
    
                      </div>
    
                      <div class="tab-pane" id="4">
                        <div class="control-group component" rel="popover" title="File Upload" trigger="manual"
                          data-content="
                          <form class='form'>
                            <div class='controls'>
                              <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                              <hr/>
                              <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                            </div>
                          </form>"
                          >
                          <label class="control-label valtype" data-valtype="label">File Button</label>
    
                          <!-- File Upload -->
                          <div class="controls">
                            <input class="input-file" id="fileInput" type="file">
                          </div>
                        </div>
    
                        <div class="control-group component" rel="popover" title="Search Input" trigger="manual"
                          data-content="
                          <form class='form'>
                            <div class='controls'>
                              <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                              <label class='control-label'>Button Text</label> <input class='input-large' type='text' name='label' id='button'>
                              <label class='control-label' id=''>Type: </label>
                              <select class='input' id='color'>
                                <option id='btn-default'>Default</option>
                                <option id='btn-primary'>Primary</option>
                                <option id='btn-info'>Info</option>
                                <option id='btn-success'>Success</option>
                                <option id='btn-warning'>Warning</option>
                                <option id='btn-danger'>Danger</option>
                                <option id='btn-inverse'>Inverse</option>
                              </select>
                              <hr/>
                              <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                            </div>
                          </form>"
                          >
                          <label class="control-label valtype" data-valtype="label">Button</label>
    
                          <!-- Button -->
                          <div class="controls valtype"  data-valtype="button">
                            <button class='btn btn-success'>Button</button>
                          </div>
                        </div>
                      </div>
    
    
    {%block sourcecode %}
                      <div class="tab-pane" id="5" name="textsource">
                        <textarea id="source" class="span6"></textarea>
                      </div>
    {%endblock %}
    
                    </fieldset>
                  </form>
                </div>
              </div> <!-- row -->
             </div> <!-- /container -->
            <script src="{{asset('bundles/Dynamic/jquery.js')}}"></script>
            <script src="{{asset('bundles/Dynamic/dynamic.js')}}"></script>
            
            <script src="{{asset('bundles/Dynamic/fb.js')}}"></script>
          </body>
        </html>

the form is generated in <div id="build">. I want to render this id. how can I do?