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" />
    </div>
</div>
<br />
<br />
<br />
<div class="product-extra">
    <p>Product 4</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...

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')) {
             var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
             
             
             text.val(parseInt(text.val()) + 1);
         } else {
             var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
             if (parseInt(text.val()) > 1) {
                 
             
                text.val(parseInt(text.val()) - 1);
             }
         }
     });

 });