[Solved] Bootstrap 5 modal popup not displaying using jQuery

Hi!

I used bootstrap 5 modal for CRUD operation. Now I want use js for edit data from js file. When I click edit button not working modal.

country.js

$('document').ready(function(){	
    $('table #editButton').on('click', function(event){
        event.preventDefault();
	// countries/findById/?id=1
	var href = $(this).attr('href');
	$.get(href, function(country, status){
	    $('#idEdit').val(country.id);
	    $('#descriptionEdit').val(country.description);
	    $('#capitalEdit').val(country.capital);
	    $('#codeEdit').val(country.code);
	    $('#continentEdit').val(country.continent);
	    $('#nationalityEdit').val(country.nationality);
        });
	$('#editModal').modal();
    });
});

    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Update Country</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form th:action="@{/countries/update}" method="put">
 
                        <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">Description:</label>
                            <input type="text" class="form-control" id="idEdit" name="id" readonly>
                        </div>
                         
                        <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">Description:</label>
                            <input type="text" class="form-control" id="descriptionEdit" name="description">
                        </div>
 
                        <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">Capital:</label>
                            <input type="text" class="form-control" id="capitalEdit" name="capital">
                        </div>
 
                        <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">Code:</label>
                            <input type="text" class="form-control" id="codeEdit" name="code">
                        </div>
 
                        <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">Continent:</label>
                            <input type="text" class="form-control" id="continentEdit" name="continent">
                        </div>
 
                        <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">Nationality:</label>
                            <input type="text" class="form-control" id="nationalityEdit" name="nationality">
                        </div>
 
                        <div class="mb-3">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
 
                </div>
            </div>
        </div>
    </div>

<a th:href="@{/countries/findById/(id=${country.id})}" class="btn btn-primary" id="editButton">Edit</a>