Plan for a page is that there is a combo box of years at top of page, and 12 month button links below. Changing the year will cause the links of the buttons to be updated to point to the file to download, or, if no file exists for that year/month then the button is disabled. For various reasons have to use JQuery. I have never used JQuery, so am gradually teaching myself by building the script.

The basic HTML for the page (also uses Bootstrap 5.3):

<!-- Dropdown current year back  -->
<select id="yearCmbo" class="font-italic mb-4">

</select>

<div class="d-grid gap-2 col-6 mx-auto" id="months">
    <a href="#" class="btn btn-outline-primary btn-lg disabled" id="January">January</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg disabled" id="February">February</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg disabled" id="March">March</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg disabled" id="April">April</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg disabled" id="May">May</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg disabled" id="June">June</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg disabled" id="July">July</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg disabled" id="August">August</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg disabled" id="September">September</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg disabled" id="October">October</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg disabled" id="November">November</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg disabled" id="December">December</a>                                    
</div>

The JQuery (so far…)

    $(document).ready(function () {
        var currentYear = new Date().getFullYear();
        for (var year = currentYear; year >= 2016; year--) {
            $('#yearCmbo').append($('<option>', {
                value: year,
                text: year
            }));
        }

        $('#yearCmbo').on('change', function () {
            var selectedYear = $(this).val();
            alert(selectedYear);
            // 1 - disable all the month buttons
            $('#months .btn').removeAttr('disabled');
            // 2 - Set all the month hrefs to '' or #
            // 3 - JSON/AJAX call to PHP file - send year and get back available months and hrefs
            // set hrefs and enable buttons where data is available
        });   // end combo change

        // Initially force call to combo change function to display data for current year
        $('#yearCmbo').change();

        }); // end ready

The filling of Year Combo (select) works and the firing of yearCmbo onchange works (the alert shows). However the code to disable the button doesn’t work – the buttons remain active.

Would appreciate If anyone can let me know why it isn’t working, and also how to change hrefs as per comment 2 in the script.