JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="name">Adult Females</label>
<div class="inc">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-chevron-up"></span>
</button>
</div>
<input type="text" name="adult-female" id="2" value="0" />
<div class="dec">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
</div>
</div>
<div>
<label for="name">Adult Females</label>
<div class="inc">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-chevron-up"></span>
</button>
</div>
<input type="text" name="adult-female" id="2" value="0" />
</div>
CSS
.btn{
position:relative;
right:-200px;
display: block;
font-size:2px;
}
JavaScript
$(function() {
$(".inc").click(function() {
var $input = $(this).next();
var newValue = parseInt($input.val()) + 1;
$input.val(newValue);
});
$(".dec").click(function() {
var $input = $(this).prev();
var newValue = parseInt($input.val()) - 1;
$input.val(newValue);
});
});