title: Bootstrap adding extra field
body: <p>I'm trying to get an extra 'Message' field when clicking on the 'Add' button but for some reason it doesn't work. I want a new 'message' box appearing under the current message box. Including the add en remove button.</p>
  
  <p>I've already read through all the related topics on this site but still can't figure it out.</p>
  
  <p>Do I need to put the 'message' field in an extra form? Or am I taking the wrong 'class' in the js script?</p>
  
  <p><strong>Index.php</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-12"&gt;
        &lt;div class="form-group2"&gt;
               &lt;label for="form_message"&gt;Message *&lt;/label&gt;
               &lt;textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."&gt;&lt;/textarea&gt;
           &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
           &lt;div class="action"&gt;
              &lt;input type="button" name="clone" class="btn btn-success btn-file" value="Add"&gt;
              &lt;input type="button" name="remove" class="btn btn-danger btn-file" value="Remove"&gt;
           &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-lg-6 col-sm-6 col-12"&gt;
        &lt;div class="input-group"&gt;
               &lt;label class="input-group-btn"&gt;
                &lt;span class="btn btn-default btn-send"&gt;
                   Browse&amp;hellip; 
                   &lt;input type="file" name="file" style="display: none;"&gt;
                 &lt;/span&gt;
                &lt;/label&gt;
                &lt;input type="text" class="form-control" readonly&gt;
         &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="col-md-12"&gt;
          &lt;input type="submit" class="btn btn-success btn-send" value="Send message"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
             &lt;p class="text-muted"&gt;&lt;strong&gt;*&lt;/strong&gt; These fields are required.&lt;/p&gt;
           &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
  
  &lt;/div&gt;&lt;!-- /.8 --&gt;
  
  &lt;/div&gt; &lt;!-- /.row--&gt;
  
  &lt;/div&gt; &lt;!-- /.container--&gt;
  
  &lt;script src="https://code.jquery.com/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="validator.js"&gt;&lt;/script&gt;
  &lt;script src="document.js"&gt;&lt;/script&gt;
  &lt;script src="extra.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>extra.js</strong></p>
  
  <pre><code>var regex = /^(.+?)(\d+)$/i;
  var cloneIndex = $(".form-group2").length;
  
  function clone(){
      $(this).parents(".form-group2").clone()
          .appendTo("body")
          .attr("id", "form-group2" +  cloneIndex)
          .find("*")
          .each(function() {
              var id = this.id || "";
              var match = id.match(regex) || [];
              if (match.length == 3) {
                  this.id = match[1] + (cloneIndex);
              }
          })
          .on('click', 'button.clone', clone)
          .on('click', 'button.remove', remove);
      cloneIndex++;
  }
  function remove(){
      $(this).parents(".form-group2").remove();
  }
  $("button.clone").on("click", clone);
  
  $("button.remove").on("click", remove);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/JH33X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JH33X.png" alt="enter image description here"></a></p>