Dynamic form field on bootstrap

Question

I have looked for many solutions but I couldn't get exact solution for my bootstrap form.

I have the code below. I want to put a (+) just next to input field and adding new field with (-) to remove.

All the examples done with bootstrap not using form group. But my case is form group. How i can do that?

I am using bootstrap 3.3.6 version.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-horizontal">
  <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Pickup Time</label>
      <div class="col-md-4">
        <div class="input-group">
          <input type="text" class="form-control"/>
        </div>
        <span class="help-block">Enter the pickup time </span>
      </div>
    </div>
  </div>
  <div class="form-actions right">
    <div class="row">
      <div class="col-md-offset-3 col-md-9">
        <button type="button" class="btn btn-default prev-step">Previous</button>
        <button type="button" class="btn default">Cancel</button>
        <button type="button" class="btn btn-primary next-step blue">
          <i class="fa fa-check"></i>Save and Continue
        </button>
        <button type="button" class="btn btn-primary next-step">Next</button>
      </div>
    </div>
  </div>
</div>

Answer 1

var template = '<div class="input-group"><input type="text" class="form-control"/></div>',
    minusButton = '<span class="btn input-group-addon delete-field">(-)</span>';

$('.add-field').click(function() {
  var temp = $(template).insertBefore('.help-block');
  temp.append(minusButton);
});

$('.fields').on('click', '.delete-field', function(){
  $(this).parent().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-horizontal">
  <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Pickup Time</label>
      <div class="col-md-4 fields">
        <div class="input-group">
          <input type="text" class="form-control"/>
          <span class="btn input-group-addon add-field">(+)</span>
        </div>
        <span class="help-block">Enter the pickup time </span>
      </div>
    </div>
  </div>
  <div class="form-actions right">
    <div class="row">
      <div class="col-md-offset-3 col-md-9">
        <button type="button" class="btn btn-default prev-step">Previous</button>
        <button type="button" class="btn default">Cancel</button>
        <button type="button" class="btn btn-primary next-step blue">
          <i class="fa fa-check"></i>Save and Continue
        </button>
        <button type="button" class="btn btn-primary next-step">Next</button>
      </div>
    </div>
  </div>
</div>