## html ##

<div class="form-group">
          <div class="row">
            <input type="hidden" name="countmetrics" value="1" />
                <div class="control-group" id="fields">
                    <label class="control-label" for="metrics">Metrics</label>
                    <div class="controls" id="profs">
                            <div id="field">
                              <input class="input form-control multinput" id="metrics1" name="metrics1" type="text" data-items="8"/>
                              <button id="b1" class="btn add-more-metrics multibtn" type="button">+</button>
                            </div>
                    </div>
                </div>
          </div>
        </div>

## js ##

$(".add-more-metrics").click(function(e){
      console.log("oui");
        e.preventDefault();
        var addto = "#metrics" + nextmetrics;
        var addRemove = "#metrics" + (nextmetrics);
        nextmetrics = nextmetrics + 1;
        var newIn = '<input autocomplete="off" class="input form-control multinput" id="metrics' + nextmetrics + '" name="metrics' + nextmetrics + '" type="text">';
        var newInput = $(newIn);
        var removeBtn = '<button id="remove' + (nextmetrics - 1) + '" class="btn btn-danger remove-me multibtn" >-</button></div><div id="metrics">';
        var removeButton = $(removeBtn);
        $(addto).after(newInput);
        $(addRemove).after(removeButton);
        $("#metrics" + nextmetrics).attr('data-source',$(addto).attr('data-source'));
        $("#countmetrics").val(nextmetrics);

            $('.remove-me').click(function(e){
                e.preventDefault();
                var metricsNum = this.id.charAt(this.id.length-1);
                var metricsID = "#metrics" + metricsNum;
                $(this).remove();
                $(metricsID).remove();
            });
    });