JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="product-extra">
<p>Product 1</p>
						<div class="quantity-adder pull-left">
							<div class="quantity-number pull-left">
								<span>Qutantity</span>
								<input type="text" name="quantity" size="2" value="1" />
							</div>
							<div class="quantity-wrapper pull-left">
								<span class="add-up add-action fa fa-plus"></span> 
								<span class="add-down add-action fa fa-minus"></span>
							</div>					
							<input type="hidden" name="product_id" size="2" value="40" />	
						</div>											
						
				</div>
        <br /> 
                         <br /> 
                               <br /> 
                  
                   <div class="product-extra">
<p>Product 2</p>
						<div class="quantity-adder pull-left">
							<div class="quantity-number pull-left">
								<span>Qutantity</span>
								<input type="text" name="quantity" size="2" value="1" />
							</div>
							<div class="quantity-wrapper pull-left">
								<span class="add-up add-action fa fa-plus"></span> 
								<span class="add-down add-action fa fa-minus"></span>
							</div>					
							<input type="hidden" name="product_id" size="2" value="44" />	
						</div>											
						
				</div>
                   <br /> 
                         <br /> 
                               <br /> 
                               <div class="product-extra">
<p>Product 3</p>
						<div class="quantity-adder pull-left">
							<div class="quantity-number pull-left">
								<span>Qutantity</span>
								<input type="text" name="quantity" size="2" value="1" />
							</div>
							<div class="quantity-wrapper pull-left">
								<span class="add-up add-action fa fa-plus"></span> 
								<span class="add-down add-action fa fa-minus"></span>
							</div>					
							<input type="hidden" name="product_id" size="2" value="48"...

CSS

.product-extra .quantity-adder, .minadd .product-extra .quantity-adder {
    margin: 0;
}
.product-extra .quantity-adder input, .minadd .product-extra .quantity-adder input {
    border: 1px solid #e9e9e9;
}

.product-extra .add-action, .minadd .product-extra .add-action {
    border-bottom: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
    color: #6f6f6f;
    cursor: pointer;
    display: block;
    font-size: 7px;
    height: 16px;
    line-height: 15px;
    position: relative;
    text-align: center;
    width: 27px;
}
.product-extra .add-action:hover, .minadd .product-extra .add-action:hover {
    color: #629735;
}
.product-extra .add-up, .minadd .product-extra .add-up {
    border-bottom: 0 none;
}
.product-extra .add-to-icon, .minadd .product-extra .add-to-icon {
    background: #629735 none repeat scroll 0 0;
    font-size: 19px;
    padding: 6px;
}
.product-extra .quantity-number input, .minadd .product-extra .quantity-number input {
    height: 32px;
    min-width: 57px;
    text-align: center;
    width: auto !important;
}

JavaScript

$(document).ready( function(){
	$(".quantity-adder .add-action").click( function(){
		if( $(this).hasClass('add-up') ) {  
			$("[name=quantity]",'.quantity-adder').val( parseInt($("[name=quantity]",'.quantity-adder').val()) + 1 );
		}else {
			if( parseInt($("[name=quantity]",'.quantity-adder').val())  > 1 ) {
				$("input",'.quantity-adder').val( parseInt($("[name=quantity]",'.quantity-adder').val()) - 1 );
			}
		}
	} );
    
    });