Добавление дополнительного Input на Bootstrap

При нажатии на кнопку появляется дополнительное поле ввода в виде input которое при желании можно так же убрать нажатием.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- Latest compiled and minified jаvascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<script type='text/jаvascript' src='https://code.jquery.com/jquery-1.10.1.js'></script>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container">
 <div class="row">
 <div class="col-xs-offset-3 col-xs-6">
 <form>
 <div class="form-group">
 <label>Добавить INPUT</label>
 <div class="form-group input-group">
 <input type="text" name="multiple[]" class="form-control">
 <span class="input-group-btn"><button type="button" class="btn btn-success btn-add">✚</button></span>
 </div>
 </div> 
 </form>
 </div>
 </div>
 </div>
 <script>
 $(document).on('click', '.btn-add', function(event) {
 event.preventDefault();

 var field = $(this).closest('.form-group');
 var field_new = field.clone();

 $(this)
 .toggleClass('btn-success')
 .toggleClass('btn-add')
 .toggleClass('btn-danger')
 .toggleClass('btn-remove')
 .html('✖');

 field_new.find('input').val('');
 field_new.insertAfter(field);
 });

 $(document).on('click', '.btn-remove', function(event) {
 event.preventDefault();
 $(this).closest('.form-group').remove();
 });
 </script>