Unable to remove class modal-backdrop from Modal after submitting it

I am using data-backdrop="static" data-keyboard="false" in my model. It works fine the first time. It gets open and gets close as many times as I want but when I submit the form inside the modal through ajax and try to open the modal again then modal pops up and disappears. It happens because of class="modal-backdrop". Because when I remove modal-backdrop from Inspect option in elements. My page works fine. I tried to remove the class through ajax in success function but didn't work.

This is my modal:

<div class="modal fade" id="product-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">

and this is my ajax function:

<script>
$("#product-1").submit(function (e){
    e.preventDefault();

    let quantity = $("#quantity").val();
    let spice = $(".spice:checked").val();
    let tandoori_roti = document.getElementById('tandoori_roti').checked ? '1' : '0' ;
    let price = $("#price").val();
    let pieces = $(".pieces:checked").val();
    let instructions = $("#instructions").val();
    let products_id = $("#products_id").val();
    console.log(tandoori_roti);
    let _token = $("input[name=_token]").val();

    $.ajax({
        url: "",
        type: "get",
        data:{
            products_id:products_id,
            quantity:quantity,
            spice:spice,
            price:price,
            pieces:pieces,
            instructions:instructions,
            _token:_token
        },
        error:function (jqXHR, exception){

        },
        beforeSend: function() {
            console.error();
        },
        beforeSend: function() {
            $('.modal-backdrop').remove();
            $('.modal-backdrop').hide();
            $('.addLoader').show();
        },
        success:function(response)
        {
            $("#product-1")[0].reset();
            $('#product-modal').modal('hide');
            $('#product-modal-2').modal('hide');
            $('#product-modal').trigger("click");
            $('#product-modal-2').trigger("click");
            
            

            setTimeout(function(){
                if (response){
                    $('.addLoader').hide();
                    $("#confirmationModal").modal("show");
                }
            },500);
        },
    })

});

I am closing the modal in success function and trying to remove the backdrop in beforeSend:Function.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3lMJ4Lc
via IFTTT