Update Element Without Refresh the Page – Jquery ajax

I created the page that can be saved the multiple locations using laravel, but now i need to edit and update location data and display it in the same page without refreshing the page. this is my html form

<form action="" method="post" id="edit_form">
                    <input type="hidden" name="address_id" value="">
                    <div id="pac-container">
                        <div class="mt-7 flex border border-green-500 py-3 rounded-xl px-5">
                            <input type="location" id="edit-pac-input" name="address" placeholder="Edit Location Name" autofocus class="w-full text-base">
                        </div>
                        <input type="hidden" readonly class="form-control mt-2" name="lat" value="{{22.3039}}">
                        <input type="hidden" readonly class="form-control mt-2" name="lang" value="{{70.8022}}">
                    </div>
                    <div id="edit-map" class="mt-5 cartMap"></div>

                <div class="mt-4 flex">
                    <label for="">
                        {{__('Set Location Type')}}
                    </label>
                    <div class="selectgroup selectgroup-pills ml-10">
                        <label class="selectgroup-item cursor-pointer">
                            <input type="radio" name="location_type" value="home" class="selectgroup-input" checked="">
                            <span class="selectgroup-button selectgroup-button-icon">{{__('HOME')}}</span>
                        </label>
                        <label class="selectgroup-item cursor-pointer">
                            <input type="radio" name="location_type" value="office" class="selectgroup-input">
                            <span class="selectgroup-button selectgroup-button-icon">{{__('OFFICE')}}</span>
                        </label>
                        <label class="selectgroup-item cursor-pointer">
                            <input type="radio" name="location_type" value="other" class="selectgroup-input">
                            <span class="selectgroup-button selectgroup-button-icon">{{__('OTHERS')}}</span>
                        </label>
                    </div>
                </div>
                <div class="w-full text-right mt-3">
                    <button type="button" onclick="updateAddress()" class="md:bg-green-500 text-center md:w-auto md:h-auto md:font-bold rounded-full md:hover:bg-green-600 md:text-white text-sm p-2">{{__('Edit Address')}}</button>
                </div>
            </form>

this is the jquery function

function updateAddress()
{
        var formData = new FormData($('#edit_form')[0]);
        $.ajax({
            headers:
            {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "POST",
            url:base_url+'/update_address',
            data:formData,
            cache:false,
            contentType:false,
            processData:false,
            success: function(result) {
                if (result.success == true) {
                
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: 'Address Updated Successfully!'
                })
                
                
            }
            else{
            }
        },
        error: function (err) {
            console.log('err', err)
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'This record is connect with another data!'
            });
        }
    });
}

Edit Location Page:

I need to update and display this data without page refreshing. How to do that?