Failure to update DOM element content via Jquery Ajax

Question

When using the JavaScript below, the element with id #totalprice doesn't update the second time.

$('.spinner_btn').each(function () {
    $(this).on('click', function () {
        spinner = $(this).siblings(".custom_spinner").data('spinnerclass');
        $('.'+spinner).addClass('show');
        $(this).addClass('hide');
        $('.orderbox').addClass("open");
       // $(this).siblings('.custom_spinner').children('.input-group').children('.input-number').val(1);
        $.ajax({
            'type' : "POST",
            'url'  : 'menus/temp',
            'data' : {
                '_token' : $('input[name=_token]').val(),
                'menu_id' : $(this).siblings('.custom_spinner').children('.input-group').children('.menu_id').val(),
                'menu_name': $(this).siblings('.custom_spinner').children('.input-group').children('.menu_name').val(),
                'menu_price': $(this).siblings('.custom_spinner').children('.input-group').children('.menu_price').val(),
                'quantity' : $(this).siblings('.custom_spinner').children('.input-group').children('.input-number').val(),
            },
            success : function($data){
                alert($data.total);
                $('#totalprice').replaceWith($data.total);
                if($data.menus.edit == 'yes'){
                    if($data.quantity == 0){
                        $(".item" + $data.menus.id).replaceWith(
                            "<tr class='item" + $data.menus.id + "'><td>" + $data.menus.name + "</td><td>" +
                            $data.quantity + "</td><td>" + $data.quantity * $data.menus.price + "</td><td><span id='paddingcustom"
                             + "'><span class='glyphicon glyphicon-minus cancelbox"+ "'"+"data-menuid='"+ $data.menus.id + "'></span>" +" </span>"
                            +"</td><td></td></tr>"
                        );
                    }
                }else{
                    $('#vouchertbl').append("<tr class='item" + $data.menus.id + "'><td>" + $data.menus.name + "</td><td>" +
                        $data.quantity + "</td><td>" + $data.quantity * $data.menus.price + "</td><td><span id='paddingcustom"
                        + "'><span class='glyphicon glyphicon-minus cancelbox"+ "'"+"data-menuid='"+ $data.menus.id + "'></span>" +" </span>"
                        +"</td><td></td></tr>"
                    );
                }
            }
        });

    });
});

Alert on data.total show the correct output but update failed on id.I have read some about delegate but I am new to jquery and don't know the syntax for simple element .

Answer 1

I guess you are replacing the #totalprice element, since is not working in the second time
Instead of

$('#totalprice').replaceWith($data.total); 

try

$('#totalprice').text($data.total);

Refer these replaceWith() & text()