Prevent multiple files downloading after click on button

I am doing a download functionality by jquery and laravel.

I have an anchor tag in the loop.

    <a href="#" name="cite" class="popover-trigger" data-placement="top" download data-target="#downloadModal" data-video-id="{{ Crypt::encrypt($video_list->id) }}">Cite</a>

This anchor tag is in loop and there are multiple anchor tag based on the loop.

below is the modal.


    <div class="modal fade" id="downloadModal" tabindex="-1" role="dialog" aria-labelledby="downloadModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="downloadModalLabel">Download Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to download the BibTeX file?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="confirmDownload">Confirm Download</button>
            </div>
        </div>
    </div>
    </div>

By clicking on the anchor tag, related modal will be open and if I click on the button the only single file should be downloaded.

js is:

    <script>
    $(document).ready(function() {
    var downloadInProgress = false;
    var currentVideoId = null;

    // Handle popover click to show modal
    $('.popover-trigger').on('click', function(e) {
        e.preventDefault();
        var videoId = $(this).data('video-id');
        currentVideoId = videoId;
        $('#downloadModal').modal('show');
    });

    // Handle confirm download button click
    $('#confirmDownload').on('click', function() {
        // Check if a download is already in progress
        if (downloadInProgress || currentVideoId === null) {
            return;
        }

        // Set the download flag to true
        downloadInProgress = true;

        // Disable the Confirm Download button to prevent multiple clicks
        $(this).prop('disabled', true);

        // Make an AJAX request to your Laravel route
        var videoId = currentVideoId;
        var url = "{{ route('export.bibtex', ':videoId') }}";
        url = url.replace(':videoId', videoId);
        $.ajax({
            url: url,
            method: 'GET',
            success: function(response) {
                var filename = response.filename;
                var content = response.content;

                // Create a Blob with the response content
                var blob = new Blob([content], { type: 'text/plain' });

                // Create a link element and trigger a download
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = filename + '.bib';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            },
            error: function(error) {
                console.error('Error downloading BibTeX:', error);
            },
            complete: function() {
                // Re-enable the Confirm Download button after the request is complete
                $('#confirmDownload').prop('disabled', false);

                // Set the download flag to false
                downloadInProgress = false;

                // Reset the currentVideoId variable
                currentVideoId = null;

                // Close the modal after download
                $('#downloadModal').modal('hide');
            }
        });
    });

    // Handle modal close event to reset the download flag
    $('#downloadModal').on('hidden.bs.modal', function() {
        downloadInProgress = false;
    });
    });
    </script>

My controller is:


public function export_bibtex($video_id)
{
    $video_id = Crypt::decrypt($video_id);
    $corr_authors = DB::table('coauthors')
                        ->where('videoupload_id',$video_id)
                        ->where('authortype_id','3') // 3 for corresponding author
                        ->get();
    
    foreach($corr_authors as $corr_authors_value)
    {
        $name = '';
        $surname = '';
        if(!empty($corr_authors_value->name))
        {
            $name = $corr_authors_value->name;
        }
        if(!empty($corr_authors_value->surname))
        {
            $surname = ' '.$corr_authors_value->surname;
        }
        $corr_author_array[] = $name.$surname;
        $corresponding_author_data = implode(", ",$corr_author_array);  
    }
            
    $video_details = single_video_details($video_id);
    $rvoi_link = generate_rvoi_link($video_details->short_name,$video_details->historycurrentstatus_created_at,$video_details->unique_number);
    $entries = [
        [
            'video_unique_id' => $video_details->unique_number,
            'author' => $corresponding_author_data,
            'title' => $video_details->video_title,
            'journal' => 'ResearchVideos',
            'year' => Carbon::parse($video_details->historycurrentstatus_created_at)->year,
            'month' => Carbon::parse($video_details->historycurrentstatus_created_at)->format('F'),
            'doi' => $rvoi_link
        ],
    ];
    $bibtex = $this->convertToBibTeX($entries);
    $filename = 'RV'.$video_details->unique_number;
    $response = Response::make($bibtex);
    $response = ['filename'=>$filename, 'content'=>$response->getContent()];

    return response()->json($response);
}

After clicking on the modal button it downloads multiple same files. And in the inspector I checked multiple same ajax is calling at the same time.