Select2 X button missing ver [email protected]

Question

I am developing a website using Laravel 10. As you can see in my screenshot the x button is missing. The first time I implemented this, it worked fine, but after months, it happened when I returned to the page. Missing x button to unselect

Here is the script of my select2, maybe it helps. I wanted to append an HTML to a div when selecting data from guidebooksData. I also checked my console it doesn't have any errors. Has anyone met this problem before?

$(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();
    });
});
$(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();
    });
});

I have tried to search for 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 not working. Any ideas on how to make it appear?

Edit After some research I fixed the bug, the problem lies in my CSS file. something changed that made the x button gone