Select2 X button missing ver [email protected]

Hello I’m Regan I am developing website using laravel 10. As you can see in my screenshot the x button is missing. The first time I implement this its working fine, but after months, when I came back to the page, it happens.
Missing x button to unselect

Here are the script of my select2 maybe it helps. I wanted to append an HTML to a div when selected a data from guidebooksData. I also check my console it doesn’t have any errors. Have anyone met this problem before?

<script>
            $(document).ready(function() {
                $('#dropDownSelectBooks{{$pricing->id}}').select2({
                    placeholder:'{{__("search-guidebook")}}',
                    maximumSelectionLength: {{$pricing->total_guidebook}}
                });

                // Function to update selected guidebooks
                function updateSelectedGuidebooks() {
                    var selectedGuidebooksContainer = $('#selected-guidebook{{$pricing->id}}');
                    var selectedGuidebooks = $('#dropDownSelectBooks' + currentSectionId).select2('data');
                    selectedGuidebooksContainer.empty();
                    var count = 1;

                    selectedGuidebooks.forEach(element => {
                        // Loop through guidebooksData to find the guidebook with the matching ID
                        var dataId = element.id.trim();
                        for (var i = 0; i < guidebooksData.length; i++) {
                            if (guidebooksData[i].id == dataId) {
                                // Create HTML elements to represent the guidebook
                                var guidebookHTML = '<div class="block">';
                                guidebookHTML += '<h3>Guidebook ' + count + '</h3>';
                                guidebookHTML += '<div class="book">';
                                guidebookHTML += '<div class="img" style="background: url('' + guidebooksData[i].thumbnail + '') no-repeat;"></div>';
                                guidebookHTML += '<div class="desc">';
                                guidebookHTML += '<p>Guidebook</p>';
                                guidebookHTML += '<h3>'+ guidebooksData[i].title +'</h3>';
                                guidebookHTML += '<span>by ' + guidebooksData[i].user.first_name + '</span>';
                                guidebookHTML += '</div>';
                                guidebookHTML += '</div>';
                                guidebookHTML += '</div>';
                                
                                // Append the guidebook HTML to selectedGuidebooksContainer
                                selectedGuidebooksContainer.append(guidebookHTML);
                                break; // Exit the loop since the guidebook has been found
                            }
                        }
                        count = count + 1;
                    });
                }

                // Event listener for dropdown change
                $('#dropDownSelectBooks{{$pricing->id}}').on('change', function (e) {
                    updateSelectedGuidebooks();
                });
            });
        </script>

I have tried to search any missing x button in stackoverflow but it’s not the same problem as me. I also have tried to remove my functions but still its not working. Any ideas how to make it appear?