Collapsible page to prevent reloading and staying the same when I update data

I have a collapsible webpage in a multiproject mvc solution. I have an js code:

`$(document).on("click", ".open-AddSendDialog", function () {
    var myBookId = $(this).data('id');
    $("#sendId").val(myBookId);
});
`

with this code when I click on submit button, everything works fine but it reloads the entire page and I should re open the collapsed parts again but I want to prevent that. when I use AJAX for it I get 0 as Id even when I call the required data into the AJAX code. how can I solve this problem?
this is the new js that I wrote:

`    $(document).ready(function () {
        $('#btn1').click(function (e) {
            e.preventDefault();

            var formData = {

                Id: $('#mallMaintenanceSystemId').val(),
                Statue: $('#mallMaintenanceSystem_Statue').val(),
                Note: $('#mallMaintenanceSystem_Note').val(),
                ImageFile1: $('#mallMaintenanceSystem_ImageFile1').val(),
                ImageFile2: $('#mallMaintenanceSystem_ImageFile2').val(),
                ImageFile3: $('#mallMaintenanceSystem_ImageFile3').val(),
                ImageFile4: $('#mallMaintenanceSystem_ImageFile4').val()
                
            };
            var p1 = {
                mallMaintenanceSystem : formData,

            };

            $.ajax({
                type: 'POST',
                url: '/MallAndInstruction/Send',
                data: p1,
                success: function (response) {
                    alert('Data saved successfully!');
                },
                error: function (response) {
                    alert('Error saving data!');
                }
            });
        });
    });`

btw I use both the old and the new js codes together!