Hola estoy teniendo problemas con un input form de números ,resulta que cuando repito todo el div solo me toma estilo a uno solo.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    (function ( $ ) {

    	$.fn.bootstrapNumber = function( options ) {

    		var settings = $.extend({
    			upClass: 'default',
    			downClass: 'default',
    			upText: '+',
    			downText: '-',
    			center: true
    			}, options );

    		return this.each(function(e) {
    			var self = $(this);
    			var clone = self.clone(true, true);

    			var min = self.attr('min');
    			var max = self.attr('max');
    			var step = parseInt(self.attr('step')) || 1;

    			function setText(n) {
    				if (isNaN(n) || (min && n < min) || (max && n > max)) {
    					return false;
    				}

    				clone.focus().val(n);
    				clone.trigger('change');
    				return true;
    			}

    			var group = $("<div class='input-group'></div>");
    			var down = $("<button type='button'>" + settings.downText + "</button>").attr('class', 'btn btn-' + settings.downClass).click(function() {
    				setText(parseInt(clone.val() || clone.attr('value')) - step);
    			});
    			var up = $("<button type='button'>" + settings.upText + "</button>").attr('class', 'btn btn-' + settings.upClass).click(function() {
    				setText(parseInt(clone.val() || clone.attr('value')) + step);
    			});
    			$("<span class='input-group-btn'></span>").append(down).appendTo(group);
    			clone.appendTo(group);
    			if(clone && settings.center) {
    				clone.css('text-align', 'center');
    			}
    			$("<span class='input-group-btn'></span>").append(up).appendTo(group);

    			// remove spins from original
    			clone.prop('type', 'text').keydown(function(e) {
    				if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
    					(e.keyCode == 65 && e.ctrlKey === true) ||
    					(e.keyCode >= 35 && e.keyCode <= 39)) {
    					return;
    				}
    				if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
    					e.preventDefault();
    				}

    				var c = String.fromCharCode(e.which);
    				var n = parseInt(clone.val() + c);

    				if ((min && n < min) || (max && n > max)) {
    					e.preventDefault();
    				}
    			});

    			self.replaceWith(group);
    		});
    	};
    } ( jQuery ));
     
    const inputRange = $('#html-input-range');
    let htmlInputRange = {
      idNotThere : '<p>Note: Missing input tag id name e.g html-input-range</p>',
      init () {
        if (inputRange.length > 0) {
          let inputRanges = $('#html-input-range');
          inputRanges.parent().addClass('html-inupt-range');
          // if too many input ranges there for now hiding this part.
          // inputRanges.each(function( index ) {
          //   let $this = $(this);
          // });
          let $this = inputRanges;
            // default input range starts at 0 and ends at 100
            $this.attr({
              min: 0,
              max: 100,
              value: 0,
              step: 1
            });
        } else {
          $('input[type=range]').parent().append(htmlInputRange.idNotThere);
        }
      },
      options (inputs) {
        htmlInputRange.init();
        let options = inputs;
        // custom tracker
        $('input[type=range]').parent().addClass('html-input-range-custom');
        $('input[type=range]').parent().append('<div class="hir-tracker-bg"></div><div class="hir-tracker-thumb"></div>');
        let min = 0;
        let max = 100;
        if (options.tooltip === true) {
          if (options.max) {
            max = options.max;
            $(inputRange).attr({
              max: options.max
            });
          }
          $('input[type=range]').parent().append('<div class="tooltip">'+ min +'</div>');
        }
        if (options.labels === true) {
          $(inputRange).parent().append('<ul class="hir-labels"></ul>');
          let setWidth;
          if (options.max) {
            setWidth = options.max/10;
          } else {
            setWidth = max/10; 
          }
          for (let i = 0; i < setWidth; i++) {
            $('.hir-labels').append('');
          }
        }
      }
    }

    $(inputRange).on('input change', inputRange, function (e) {
      /*
      * splitting 100 by input range max value
      * for active tracker and tooltip position.
      */
      let inputMax = 100 / inputRange.attr('max');
      let trackerTooltipMove = (inputRange.val() * inputMax);
      $('.html-inupt-range .tooltip').css('left', trackerTooltipMove + '%');
      $('.html-input-range-custom .hir-tracker-thumb').css('width', trackerTooltipMove + '%');
      // updating tooltip value based on the range from to.
      $('.html-inupt-range .tooltip').text(inputRange.val());
    });
    $("[name='checkbox2']").change(function() {
    	if(!confirm('Do you wanna cancel me!')) {
    		this.checked = true;
    	}
    });

    $('#after').bootstrapNumber();
    $('#colorful').bootstrapNumber({
    	upClass: 'success',
    	downClass: 'danger'
    });



<!-- language: lang-css -->

    .cantidad span{
      margin-right: 0;
      border: initial
    }
    .cantidad button{
      background: transparent!important;
    }
    .cantidad .form-group{
      width: 167px
    }
    .cantidad .input-group{
      border: 1px solid gray;
    }
    .cantidad .input-group > .form-control{
      border: 1px solid #fff!important;
    }

<!-- language: lang-html -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

    <div class="cantidad">
    <div class="form-group">
      <label><b>Cantidad:</b></label>
      <input id="after" class="form-control" type="number" value="1" min="1" max="10" />
    </div>

    <div class="form-group">
      <label><b>Cantidad:</b></label>
      <input id="after" class="form-control" type="number" value="1" min="1" max="10" />
    </div>
    </div>

<!-- end snippet -->