title: Zend Framework 3 - Add and Remove new input element section using javascript
body: <p>I want to add multiple school locations in zend-form on click of anchor tag or button.
  So that zend form validation can be applied to all dynamically created fields
  Please see attached image.I want to clone div with in red border in image
  <a href="https://i.stack.imgur.com/fmYW1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fmYW1.png" alt="enter image description here"></a>  </p>
  
  <p>Below is SchoolController Class</p>
  
  <pre><code>&lt;?php
  
  
  
  namespace Application\Controller;
  
  use Zend\Mvc\Controller\AbstractActionController;
  use School\Service\SchoolManager;
  use Doctrine\ORM\EntityManager;
  use Zend\View\Model\ViewModel;
  use Application\Form\AddSchoolForm;
  use School\Entity\School;
  use School\Entity\SchoolLocation;
  
  class SchoolController extends AbstractActionController {
  
      /**
       * Entity manager.
       * @var Doctrine\ORM\EntityManager
       */
      private $entityManager;
  
      /**
       * School manager.
       * @var School\Service\SchoolManager 
       */
      private $schoolManager;
  
      public function __construct($entityManager, $schoolManager) {
          $this-&gt;entityManager = $entityManager;
          $this-&gt;schoolManager = $schoolManager;
      }
  
      public function addAction() {
          $form = new AddSchoolForm();
  
  
          // Check if user has submitted the form
          if ($this-&gt;getRequest()-&gt;isPost()) {
  
              // Fill in the form with POST data
              $data = $this-&gt;params()-&gt;fromPost();
              $form-&gt;setData($data);
              // Validate form
              if ($form-&gt;isValid()) {
                  $reqData = array(
                      'name' =&gt; $data['name'],
                      'description' =&gt; $data['description'],
                      'active' =&gt; 1,
                      'school_location' =&gt; (object) array(
                          (object) array(
                              "apartment_number" =&gt; $data['apartment_number'],
                              "street_name" =&gt; $data['street_name'],
                              "city" =&gt; $data['city'],
                              "state" =&gt; $data['state'],
                              "pin" =&gt; $data['pin'],
                              "active" =&gt; 1)
                      )
                  );
  
                  $this-&gt;schoolManager-&gt;addSchool((object) $reqData);
              } else {
                  print_r($form-&gt;getMessages());
                  die("not valid data");
                  $isLoginError = true;
              }
          }
          return new ViewModel([
              'form' =&gt; $form
          ]);
      }
  }
  </code></pre>
  
  <p>Below is AddSchoolForm Class:</p>
  
  <pre><code>&lt;?php
  
  namespace Application\Form;
  
  use Zend\Form\Element;
  use Zend\Form\Form;
  use Zend\InputFilter\InputFilter;
  
  /**
   * This form is used to collect user's login, password and 'Remember Me' flag.
   */
  class AddSchoolForm extends Form {
  
      /**
       * Constructor.
       */
      public function __construct() {
          // Define form name
          parent::__construct('addschool-form');
  
          // Set POST method for this form
          $this-&gt;setAttribute('method', 'post');
  
          $this-&gt;addElements();
          $this-&gt;addInputFilter();
      }
  
      /**
       * This method adds elements to form (input fields and submit button).
       */
      protected function addElements() {
  
          $this-&gt;add([
              'attributes' =&gt; array(
                  'name' =&gt; 'name',
                  'type' =&gt; 'text',
                  'id' =&gt; 'name',
                  'class' =&gt; 'form-control',
                  'required' =&gt; 'required',
              ),
              'options' =&gt; [
                  'label' =&gt; 'School Name',
              ],
          ]);
  
          // Add "desc" field
          $this-&gt;add([
              'attributes' =&gt; array(
                  'name' =&gt; 'description',
                  'type' =&gt; 'text',
                  'id' =&gt; 'description',
                  'class' =&gt; 'form-control',
                  'required' =&gt; 'required',
              ),
              'options' =&gt; [
                  'label' =&gt; 'Description',
              ],
          ]);
  
  
          $this-&gt;add([
              'type' =&gt; 'hidden',
              'name' =&gt; 'active',
              'value' =&gt; 1
          ]);
  
          // Add "school location" field
          $this-&gt;add([
              'attributes' =&gt; array(
                  'name' =&gt; 'apartment_number',
                  'type' =&gt; 'text',
                  'id' =&gt; 'apartment_number',
                  'class' =&gt; 'form-control'
              ),
              'options' =&gt; [
                  'label' =&gt; 'Apartment Number',
              ],
          ]);
  
  
          $this-&gt;add([
              'attributes' =&gt; array(
                  'name' =&gt; 'street_name',
                  'type' =&gt; 'text',
                  'id' =&gt; 'street_name',
                  'class' =&gt; 'form-control'
              ),
              'options' =&gt; [
                  'label' =&gt; 'Street Name',
              ],
          ]);
  
  
  
          $this-&gt;add([
              'attributes' =&gt; array(
                  'name' =&gt; 'city',
                  'type' =&gt; 'text',
                  'id' =&gt; 'city',
                  'class' =&gt; 'form-control'
              ),
              'options' =&gt; [
                  'label' =&gt; 'City',
              ],
          ]);
  
  
  
          $this-&gt;add([
              'attributes' =&gt; array(
                  'name' =&gt; 'state',
                  'type' =&gt; 'text',
                  'id' =&gt; 'state',
                  'class' =&gt; 'form-control'
              ),
              'options' =&gt; [
                  'label' =&gt; 'State',
              ],
          ]);
  
  
          $this-&gt;add([
              'attributes' =&gt; array(
                  'name' =&gt; 'pin',
                  'type' =&gt; 'text',
                  'id' =&gt; 'pin',
                  'class' =&gt; 'form-control'
              ),
              'options' =&gt; [
                  'label' =&gt; 'PIN',
              ],
          ]);
  
  
  
          // Add the Submit button
          $this-&gt;add([
              'type' =&gt; 'submit',
              'name' =&gt; 'submit',
              'attributes' =&gt; [
                  'value' =&gt; 'Sign in',
                  'id' =&gt; 'submit',
              ],
          ]);
      }
  
      /**
       * This method creates input filter (used for form filtering/validation).
       */
      private function addInputFilter() {
          // Create main input filter
          $inputFilter = new InputFilter();
          $this-&gt;setInputFilter($inputFilter);
  
          // Add input for "email" field
          $inputFilter-&gt;add([
              'name' =&gt; 'name',
              'required' =&gt; true,
              'filters' =&gt; [
                  ['name' =&gt; 'StringTrim'],
              ],
              'validators' =&gt; [
                  [
                      'name' =&gt; 'StringLength',
                      'options' =&gt; [
                          'min' =&gt; 5,
                          'max' =&gt; 20
                      ],
                  ],
              ],
          ]);
  
  
          $inputFilter-&gt;add([
              'name' =&gt; 'description',
              'required' =&gt; true,
              'filters' =&gt; [
              ],
              'validators' =&gt; [
                  [
                      'name' =&gt; 'StringLength',
                      'options' =&gt; [
                          'min' =&gt; 5,
                          'max' =&gt; 64
                      ],
                  ],
              ],
          ]);
      }
  
  }
  </code></pre>
  
  <p>Below is view file add.phtml</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function addSchoolLocation(){
          $( ".schoolLocation" ).clone().appendTo( ".schoolLocation" );
      }
  
  
      &lt;/script&gt;
  &lt;!-- Content Header (Page header) --&gt;
  &lt;section class="content-header"&gt;
      &lt;ol class="breadcrumb"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-dashboard"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="active"&gt;Add School&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/section&gt;
  
  &lt;!-- Main content --&gt;
  &lt;section class="content"&gt;
      &lt;div class="row"&gt;
          &lt;!-- left column --&gt;
          &lt;div class="col-md-12"&gt;
              &lt;!-- general form elements --&gt;
              &lt;div class="box box-primary form-custome"&gt;
                  &lt;div class="box-header with-border"&gt;
                      &lt;h3 class="box-title"&gt;Add School &lt;ul class="add-icon-new"&gt;
                              &lt;li&gt;&lt;a href="#" class="i-down"&gt;&lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#" class="i-refresh"&gt;&lt;i class="fa fa-refresh" aria-hidden="true"&gt;&lt;/i&gt;
                                  &lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#" class="i-close"&gt;&lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;h5 class="form-heading"&gt;School Information&lt;/h5&gt;
                  &lt;form role="form" method="post"&gt;
                      &lt;div class="box-body"&gt;
  
                          &lt;div class="form-group col-md-3 col-sm-6"&gt;
                              &lt;?= $this-&gt;formLabel($form-&gt;get('name')); ?&gt;
                              &lt;?= $this-&gt;formElement($form-&gt;get('name')); ?&gt;
                          &lt;/div&gt;
  
                          &lt;div class="form-group col-md-3 col-sm-6"&gt;
                              &lt;?= $this-&gt;formLabel($form-&gt;get('description')); ?&gt;
                              &lt;?= $this-&gt;formElement($form-&gt;get('description')); ?&gt;
                          &lt;/div&gt;
  
                          &lt;?= $this-&gt;formElement($form-&gt;get('active')); ?&gt;         
                          &lt;h5 class="form-heading"&gt;School Location&lt;/h5&gt;
                          &lt;div class="schoolLocation"&gt;
                              &lt;div class="form-group col-md-3 col-sm-6"&gt;
                                  &lt;?= $this-&gt;formLabel($form-&gt;get('apartment_number')); ?&gt;
                                  &lt;?= $this-&gt;formElement($form-&gt;get('apartment_number')); ?&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group col-md-3 col-sm-6"&gt;
                                  &lt;?= $this-&gt;formLabel($form-&gt;get('street_name')); ?&gt;
                                  &lt;?= $this-&gt;formElement($form-&gt;get('street_name')); ?&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group col-md-3 col-sm-6"&gt;
                                  &lt;?= $this-&gt;formLabel($form-&gt;get('city')); ?&gt;
                                  &lt;?= $this-&gt;formElement($form-&gt;get('city')); ?&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group col-md-3 col-sm-6"&gt;
                                  &lt;?= $this-&gt;formLabel($form-&gt;get('state')); ?&gt;
                                  &lt;?= $this-&gt;formElement($form-&gt;get('state')); ?&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group col-md-3 col-sm-6"&gt;
                                  &lt;?= $this-&gt;formLabel($form-&gt;get('pin')); ?&gt;
                                  &lt;?= $this-&gt;formElement($form-&gt;get('pin')); ?&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;a href="javascript:void(0);" onclick="addSchoolLocation();"&gt;Add School Location&lt;/a&gt;
                              &lt;a href="javascript:void(0);" id="addElement"&gt;Add School Location&lt;/a&gt;
                          &lt;/div&gt;
  
                          &lt;div class=" form-group col-sm-12"&gt;
  
                              &lt;button class="save"&gt;Save&lt;/button&gt;
                              &lt;button class="reset"&gt;Reset&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.row --&gt;
  &lt;/section&gt;
  &lt;!-- /.content --&gt;
  </code></pre>
  
  <p>I want to clone div with class schoollocation </p>
  
  <p><strong>Note*:</strong> I tried below solutions but nothing worked for me as those are not the solution for Zend Framework-3 </p>
  
  <ol>
  <li><p><a href="https://stackoverflow.com/questions/5632296/zend-framework-add-new-input-element-using-javascript">Zend Framework - Add new input element using javascript</a></p></li>
  <li><p><a href="https://docs.zendframework.com/zend-form/collections/#form-collections" rel="nofollow noreferrer">https://docs.zendframework.com/zend-form/collections/#form-collections</a></p></li>
  </ol>