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