I can't figure out why var seatsSelected isn't updated after my function even though it's a global variable. The array logs to the console just fine when it's inside my function but I need to use the array in other functions. Can someone help me edit my code?
$(document).ready(function() {
    var seatsSelected = [];
    var users = [];
    $("#purchase").hide();
    //Inserts seat selection in form input
    $(".seat").on("click", function() {
        $('#purchase').show();
        var indexOfSeat = seatsSelected.indexOf($(this).children('p').text());
        if (!($(this).hasClass("unavailable"))) {
            $(this).toggleClass("selected");
            if (($(this).hasClass("selected"))) {
                seatsSelected.push($(this).children('p').text());
                seatsSelected.forEach(function(each) {
                    $("#seats").val(seatsSelected);
                });
                //Removes unclicked seats
            } else if (!($(this).hasClass("selected"))) {
                seatsSelected.splice(indexOfSeat, 1);
                seatsSelected.forEach(function(each) {
                    $("#seats").val(seatsSelected);
                });
            }
        } else if ($(this).hasClass("unavailable")) {
            alert('This seat is unavailable')
        }
    })
    console.log(seatsSelected);
});
