kenapa crud ajax laravel tidak mau berubah tampilannya?

Jadi prosesnya semuanya berjalan baik tapi tampilan datanya tidak berubah harus reload manual. Kan ajax harusnya saat datanya sdh di ubah harusnya tampilannya jg terubah otomatis tanpa harus reload.di aplikasi saya ini kita harus me reload manual. tolong bantuannya.

<script type="text/javascript">
        $(document).ready(function(){
            // function Edit POST
            $(document).on('click', '.edit-modal', function() {
                $('#footer_action_button').text(" Update Post");
                $('#footer_action_button').addClass('glyphicon-check');
                $('#footer_action_button').removeClass('glyphicon-trash');
                $('.actionBtn').addClass('btn-success');
                $('.actionBtn').removeClass('btn-danger');
                $('.actionBtn').addClass('edit');
                $('.modal-title').text('Post Edit');
                $('.deleteContent').hide();
                $('.form-horizontal').show();
                $('#fid').val($(this).data('id'));
                $('#t').val($(this).data('name'));
                $('#myModal').modal('show');
            });

            $('.modal-footer').on('click', '.edit', function() {
                $.ajax({
                    type: 'post',
                    url: 'updatecategory',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        '_token': $('input[name=_token]').val(),
                        'id': $("#fid").val(),
                        'name': $('#t').val()
                    },
                    success: function(data) {
                        $('.post' + data.id).replaceWith(" "+
                        "<tr class='post" + data.id + "'>"+
                            "<td>" + data.id + "</td>"+
                            "<td>" + data.name + "</td>"+
                            "<td>" + data.created_at + "</td>"+
                            "<td><button class='show-modal btn btn-info btn-sm' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-trash'></span></button></td>"+
                            "</tr>");
                        }
                    });
                });

                // form Delete function
                $(document).on('click', '.delete-modal', function() {
                    $('#footer_action_button').text(" Delete");
                    $('#footer_action_button').removeClass('glyphicon-check');
                    $('#footer_action_button').addClass('glyphicon-trash');
                    $('.actionBtn').removeClass('btn-success');
                    $('.actionBtn').addClass('btn-danger');
                    $('.actionBtn').addClass('delete');
                    $('.modal-title').text('Delete Post');
                    $('.id').text($(this).data('id'));
                    $('.deleteContent').show();
                    $('.form-horizontal').hide();
                    $('.name').html($(this).data('name'));
                    $('#myModal').modal('show');
                });

                $('.modal-footer').on('click', '.delete', function(){
                    $.ajax({
                        type: 'delete',
                        url: 'destroy-category',
                        data: {
                            '_token': $('input[name=_token]').val(),
                            'id': $('.id').text()
                        },
                        success: function(data){
                            $('.post' + $('.id').text()).remove();
                        }
                    });
                });
            });
        </script>

Ini Modalnya

 <div id="myModal"class="modal fade" role="dialog">name
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="modal">
                            <div class="form-group">
                                <label class="control-label col-sm-2"for="id">ID</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="fid" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2"for="title">Category</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="t">
                                </div>
                            </div>
                        </form>
                        {{-- Form Delete Post --}}
                        <div class="deleteContent">
                            Are You sure want to delete <span class="name"></span>?
                            <span class="hidden id"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn actionBtn" data-dismiss="modal">
                            <span id="footer_action_button" class="glyphicon"></span>
                        </button>
                        <button type="button" class="btn btn-warning" data-dismiss="modal">
                            <span class="glyphicon glyphicon"></span>close
                        </button>
                    </div>
                </div>
            </div>
        </div>