test

atas

HTML

<!-- BEGIN FORM-->
<div class="form-body">

  <div class="control-group" id="fields">

    <div class="controls">
      <form role="form" autocomplete="off" method="post" id="voilation">

        <div class="form-group">
          <label>Title</label>
          <div class="input-group">
            <span class="input-group-addon">
                                                                    <i class="fa fa-envelope"></i>
                                                                </span>
            <input type="text" name="title"> </div>
        </div>


        <div class="entry input-group col-md-12">
          <div class="col-md-2">
            <div class="form-group">
              <label>Floor</label>
              <div class="input-group">
                <span class="input-group-addon">
                                                                            <i class="fa fa-street-view"></i>
                                                                        </span>
                <input class="form-control" name="floor[]" type="text" placeholder="Floor" /> </div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group">
              <label>Wall/Celing</label>
              <div class="input-group">
                <span class="input-group-addon">
                                                                            <i class="fa fa-street-view"></i>
                                                                        </span>
                <input class="form-control" name="celing[]" value="celing" type="text" />
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group">
              <label>Length</label>
              <div class="input-group">
                <span class="input-group-addon">
                                                                            <i class="fa fa-street-view"></i>
           ...

JavaScript

$(document).on('click', '.btn-add', function (e)
            {
                e.preventDefault();

                var controlForm = $('.controls form:first'),
                        currentEntry = $(this).parents('.entry:first'),
                        newEntry = $(currentEntry.clone()).appendTo(controlForm);
                newEntry.find('input').val('');
                controlForm.find('.entry:not(:last) .btn-add')
                        .removeClass('btn-add').addClass('btn-remove')
                        .removeClass('btn-success').addClass('btn-danger')
                        .html('<span class="glyphicon glyphicon-minus"></span>');
            }).on('click', '.btn-remove', function (e)
            {
                $(this).parents('.entry:first').remove();
                e.preventDefault();
                return false;
            });
            //Add wall
            $(document).on('click', '.btn-add-wall', function (e)
            {
                
                e.preventDefault();

                var controlForm = $('.subcontrol').first(),
                        currentEntry = $(this).parents('.subentry:last'),
                        newEntry = $(currentEntry.clone()).appendTo(controlForm);
                newEntry.find('input').val('');
                controlForm.find('.subentry:not(:last) .btn-add-wall')
                        .removeClass('btn-add-wall').addClass('btn-remove-wall')
                        .removeClass('btn-success').addClass('btn-danger')
                        .html('<span class="glyphicon glyphicon-minus"></span>');
            }).on('click', '.btn-remove-wall', function (e)
            {
                $(this).parents('.subentry:first').remove();
                e.preventDefault();
                return false;
            });