Reuse Ajax call as a function

Question

Having a bit of an issue with AJAX. Im setting up this function:

<script>
    function popEvents(){
    var $sqlcal = $('#calHeader').data('sqlcal');
    console.log($sqlcal);
    $.ajax({
        type: "GET",
        url: 'XXXX.php',
        data: {sqlcal: $sqlcal},
        dataType: 'json',
        cache: false,

        success: function(data){



            var x = data;
            console.log(x);
            $('.open-button').each(function(){
                var e = $(this);
                var e1 = e.data('dtc');

                if (($.inArray(e1, x) > -1)){
                    e.css('background','red');
                    console.log('yes')
                }else{
                    console.log('no');
                    }

            });

        },
        error: function(){
            console.log('didnt work');
        }

    });
    delete $sqlcal;




    }
</script>

to run when the page loads(this will populate events based on calendar dates) and it works fine. Now on the same page, there is a dropdown button on the calendar to select a different calendar.

GOAL

If a user clicks on a different calendar, the current events disappear(right now just css background color) and the new events get populated in using the function popEvents.

Issue

Here is my code for the li options:

<script>

   $( document.body ).on( 'click', '.dropdown-menu li a', function( event ) {

      var $target = $( event.currentTarget );
      var $value = $(this).data('value');


      $target.closest( '.widget-header' )
         .find( '#calHeader' ).text( $target.text() ).attr('data-sqlCal',$value)
            .end()
         .children( '.dropdown-toggle' ).dropdown( 'toggle' );
        popEvents();
      return false;

   });

</script>

When the user selects a new calendar, the 'data-sqlcal' does update but the ajax call in console log does not update with the new value of 'data-sqlcal' but rather makes the same call that it did when the page loads. Can someone help me with this and explain why this is happening? Thanks for the help in advance

console.log output when page loads and user changes calendar:

conferenceevents \\ default calendar on page 
xxxxx.php:579 ["2016-02-05", "2016-02-05", "2016-02-05", "2016-02-06", "2016-02-07"]
xxxxx.php:588 no
xxxxxx.php:586 yes
xxxxxxx:588 no
VM24700:3 XHR Loaded (xxxxxx.php - 200 OK - 24.323000106960535ms - 289B)

//clicked on a new calendar from dropdown

xxxxx.php:566 conferenceevents \\ Didnt update(should be huddleoneevents)
xxxxxx.php:579 ["2016-02-05", "2016-02-05", "2016-02-05", "2016-02-06", "2016-02-07"]
xxxxxx.php:588 no
xxxxxx.php:586 yes
xxxxxxxxx.php:588 no
VM24705:3 XHR Loaded (xxxxx.php - 200 OK - 7.968999911099672ms - 290B)