Symfony2 updating the values and displaying them without refresh with ajax

first of all I want to say that im not an expert in front-end, and this is my first time digging in to ajax. So this is what I want to do:

I want to change and show the updated value without the full pages refresh.. The only thing I want to update is the input field with its values and thats it. How can I update only that portion of the code?

This is my twig(when i press the + button i increase the quantity of the product and i want the twig to update it without refreshing the whole page. Like in any standard shopping cart):

{% for key, item in cart %}

                {% if key == info.id %}

                    <div class="input-append">

                    <input class="span1" style="max-width:34px" placeholder="{{ key }}" value="{{ item }}" id="appendedInputButtons" size="16" type="text" data-id="{{ key }}"/>
                    <a href="javascript:void(0)" class="remove btn"><i class="icon-minus"></i></a>
                    <a href="javascript:void(0)" class="add btn"><i class="icon-plus"></i></a>

                    {% endif %}

                    {% endfor %}

And this is the script:

$(document).ready(function () {
    $(document).on('click', '.add', function (e) {
    $this = $(this);   
    $.ajax({
        type: 'POST',
        url: 'add/quantity',
        dataType: 'JSON',
        data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
        success: function (data) {      
          if(data.success == false){
           alert('error')
          }else{
            document.location.reload(true);
           }
        }
    });
});   
});

currently I only have the document.location.reload(true); which reloads the full page, how can I change that code?