Modal window not opening as expected in Laravel Blade template

Question

I have a Laravel Blade template where I'm trying to open a modal window on button click using jQuery. However, the modal window is not opening as expected, and I'm facing difficulties in identifying the issue.

 @foreach($uniqueCountries as $country)
        <div class="country-block" id="{{ $country }}">
            <h2>{{ $country }}</h2>
            <div class="company-cards">
                @php
                    $uniqueCompanies = $project->where('country', $country)->pluck('company')->unique();
                @endphp
    
                @foreach($uniqueCompanies as $companyIndex => $company)
                    <div class="card company-card" data-country="{{ $country }}" data-company="{{ $company }}">
                        <!-- Ваш код для компаній -->
                        <div class="card-body">
                            <h5 class="card-title">{{ $company }}</h5>
                            <p class="card-text">{{ $project->where('country', $country)->where('company', $company)->first()->city }}</p>
                            <button class="btn btn-secondary details-btn" data-index="{{ $companyIndex }}">Детальніше</button>
                        </div>
                    </div>
                @endforeach
            </div>
                <hr>
            <div class="vacancy-cards" id="{{ $country }}" style="display: none;">
                @foreach($uniqueCompanies as $companyIndex => $company)
                    @php
                        $vacancies = $project->where('country', $country)->where('company', $company);
                    @endphp
    
                    @foreach($vacancies as $vacancyIndex => $vacancy)
                        <div class="card vacancy-card" style="margin: 10px; display: none;" data-index="{{ $companyIndex }}">
                            <!-- Ваш код для вакансій -->
                            <div class="card-body">
                                <h5 class="card-title">{{ $vacancy->vacancy }}</h5>
                                <p class="card-text">{{ $vacancy->job }}</p> 
                                <button type="button" class="btn btn-primary details-btn" onclick="openPDFEditor('{{ $vacancy->id }}')">Створити PDF</button>

                                <div id="pdfEditorModal_{{ $vacancy->id }}" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); z-index: 9999; ">
                                    <div style="display: flex; justify-content: space-between; align-items: center;">
                                        <h3>Редактор PDF</h3>
                                        <button type="button" onclick="closePDFEditor('{{ $vacancy->id }}')">✖</button>
                                    </div>
                                    <hr>
                                    <div style="display: flex;" >
                                        <div id="pdfPreview" style="margin-right: 20px; border: 1px solid #ccc;  "></div>
                                        <div>
                                            <label for="name">Країна</label>
                                            <input type="text" id="name" required>
                                            <br>
                                            <label for="email">Назва проекту\заводу</label>
                                            <input type="email" id="email" required>
                                            <br>
                                            <button type="button" onclick="generateAndPreviewPDF()">Створити і Переглянути PDF</button>
                                            <br> <br>
                                            <button type="button" onclick="downloadPDF()">Завантажити PDF</button>
                                        </div>
                                    </div>
                                </div>
                            </div> 
                        </div>
                    @endforeach
                @endforeach
            </div>
        </div>
    @endforeach
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            // Ховаємо всі блоки крім блоків країн
            $('.country-block, .company-cards, .vacancy-card, .details-btn').hide();
    
            $(document).on('click', '.country-card', function(){
                var countryId = $(this).data('country');
    
                // Ховаємо всі блоки крім блоків компаній в обраній країні
                $('.country-block').hide();
                $('#'+countryId).show();
    
                // Ховаємо всі блоки крім блоків компаній
                $('.company-cards').hide();
    
                // Показуємо блок компаній в обраній країні
                $('#'+countryId+' .company-cards').show();
    
                // Ховаємо всі блоки вакансій та кнопок "Детальніше"
                $('.details-btn').show();
            });
    
            $(document).on('click', '.details-btn', function(){
                var index = $(this).data('index');
    
                // Ховаємо всі блоки вакансій
                $('.vacancy-card').hide();
    
                // Показуємо вакансії для обраної компанії
                $('.vacancy-card[data-index="'+index+'"]').show();
            }); 
            
        });
   
        function openPDFEditor(vacancyId) {
    document.getElementById('pdfEditorModal_' + vacancyId).style.display = 'block';
}

function closePDFEditor(vacancyId) {
    document.getElementById('pdfEditorModal_' + vacancyId).style.display = 'none';
}
    

I've ensured that jQuery is properly included before my custom script, and I've checked the syntax for any errors. Despite these precautions, the modal window doesn't display.