Increment/decrement button issue - twitter-bootstrap-3

Question

Html markup:
<td data-title="Qty" class="vertical_text quantity">
<button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus" data-field="">
<span class="glyphicon glyphicon-minus"></span>
</button>
<input class="cart-input" type="text" name="qty[]" id="quantity" value="<?php echo $cart['qty']; ?>">
<button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
Script code:
$(document).ready(function() {
var quantitiy = 0;
$('.quantity-right-plus').click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
var quantity = parseInt($('#quantity').val()); //10
// If is not undefined
$('#quantity').val(quantity + 1);
// Increment
});
$('.quantity-left-minus').click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
var quantity = parseInt($('#quantity').val());
// If is not undefined
// Increment
if (quantity > 1) {
$('#quantity').val(quantity - 1);
}
});
});
I'm using bootstrap and Codeigniter. In my shopping cart table there is two button (-)button and (+)button with input field. if there is is single row in my table and when I'm clicking on the (-) button / (+) button the value of input field increment/decrement properly. but my problem is if there is two or more row in my table if I'm clicking to second row or third row (-)button/(+)button the value of first row input field increment/decrement. And when I'm refreshing the page the previous value shows up again. Help to increment/decrement button work properly and the value of input field should be update properly. Thank you.