title: Dynamic Fields Form
body: <p>Am trying to make my form dynamic,where you can add fields yourself.
  I tried the code below,but the click,doesn't trigger anything,nothing happens when i click on the add button,any help ?</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;form id="bookForm" method="post" class="form-horizontal"&gt;
      &lt;div class="form-group"&gt;
      &lt;label class="col-xs-1 control-label"&gt;Book&lt;/label&gt;
      &lt;div class="col-xs-4"&gt;
      &lt;input type="text" class="form-control" name="book[0].title" placeholder="Title" /&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-4"&gt;
      &lt;input type="text" class="form-control" name="book[0].isbn" placeholder="ISBN" /&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-2"&gt;
      &lt;input type="text" class="form-control" name="book[0].price" placeholder="Price" /&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-1"&gt;
      &lt;button type="button" class="btn btn-default addButton"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- The template for adding new field --&gt;
      &lt;div class="form-group hide" id="bookTemplate"&gt;
      &lt;div class="col-xs-4 col-xs-offset-1"&gt;
      &lt;input type="text" class="form-control" name="title" placeholder="Title" /&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-4"&gt;
      &lt;input type="text" class="form-control" name="isbn" placeholder="ISBN" /&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-2"&gt;
      &lt;input type="text" class="form-control" name="price" placeholder="Price" /&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-1"&gt;
      &lt;button type="button" class="btn btn-default removeButton"&gt;&lt;i class="fa fa-minus"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
      &lt;div class="col-xs-5 col-xs-offset-1"&gt;
      &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>And this is my javascript that i included in the bottom of the body </p>
  
  <pre><code>    $(document).ready(function() {
      var titleValidators = {
      row: '.col-xs-4',   // The title is placed inside a &lt;div class="col-xs-4"&gt; element
      validators: {
      notEmpty: {
      message: 'The title is required'
      }
      }
      },
      isbnValidators = {
      row: '.col-xs-4',
      validators: {
      notEmpty: {
      message: 'The ISBN is required'
      },
      isbn: {
      message: 'The ISBN is not valid'
      }
      }
      },
      priceValidators = {
      row: '.col-xs-2',
      validators: {
      notEmpty: {
      message: 'The price is required'
      },
      numeric: {
      message: 'The price must be a numeric number'
      }
      }
      },
      bookIndex = 0;
  
      $('#bookForm')
      .formValidation({
      framework: 'bootstrap',
      icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
      'book[0].title': titleValidators,
      'book[0].isbn': isbnValidators,
      'book[0].price': priceValidators
      }
      })
  
      // Add button click handler
      .on('click', '.addButton', function() {
      bookIndex++;
      var $template = $('#bookTemplate'),
      $clone    = $template
      .clone()
      .removeClass('hide')
      .removeAttr('id')
      .attr('data-book-index', bookIndex)
      .insertBefore($template);
  
      // Update the name attributes
      $clone
      .find('[name="title"]').attr('name', 'book[' + bookIndex + '].title').end()
      .find('[name="isbn"]').attr('name', 'book[' + bookIndex + '].isbn').end()
      .find('[name="price"]').attr('name', 'book[' + bookIndex + '].price').end();
  
      // Add new fields
      // Note that we also pass the validator rules for new field as the third parameter
      $('#bookForm')
      .formValidation('addField', 'book[' + bookIndex + '].title', titleValidators)
      .formValidation('addField', 'book[' + bookIndex + '].isbn', isbnValidators)
      .formValidation('addField', 'book[' + bookIndex + '].price', priceValidators);
      })
  
      // Remove button click handler
      .on('click', '.removeButton', function() {
      var $row  = $(this).parents('.form-group'),
      index = $row.attr('data-book-index');
  
      // Remove fields
      $('#bookForm')
      .formValidation('removeField', $row.find('[name="book[' + index + '].title"]'))
      .formValidation('removeField', $row.find('[name="book[' + index + '].isbn"]'))
      .formValidation('removeField', $row.find('[name="book[' + index + '].price"]'));
  
      // Remove element containing the fields
      $row.remove();
      });
      });
  </code></pre>
  
  <p>I included these libraries for jQuery</p>
  
  <pre><code>     &lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"&gt;&lt;/script&gt;
  </code></pre>