JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="test">

</div>
<input class="otherInput" type="text" value="1">
<div class="parent">
  <input class="qty-control" type="text" value="1">
</div>

<div class="parent">
  <input class="qty-control" type="text" value="1">
</div>
                      <span class="input-group-btn">
                        <button class="btn btn-white btn-minus" type="button">-</button>
                      </span>

JavaScript

var buttonFactory = function(contents, className) {
  var newButton = document.createElement('button');
  newButton.className = className;
  var buttonContents = document.createTextNode(contents);
  newButton.appendChild(buttonContents);
  return newButton;
};
var MinusButton = function(){
	return new buttonFactory('-', 'btn-minus');
}
var PlusButton = function(){
	return new buttonFactory('+', 'btn-plus');
}

$(function() {
	//find .qty-control inputs, wrap them in plus and minus buttons, then append 
	$(new MinusButton()).insertBefore('.qty-control')
  $(new PlusButton()).insertAfter('.qty-control')
	
	$('.btn-minus').on('click', function(){
		$(this).siblings('input').val(parseInt($(this).siblings('input').val()) - 1);
	});

	$('.btn-plus').on('click', function(){
		$(this).siblings('input').val(parseInt($(this).siblings('input').val()) + 1);
	});

});