javascript holding onto old variable

I'm using JQueryFullCaledar and have written a function to hijack the eventclick. By default it just ran this code:

var id = event.id;
      $.ajax({
       url:"delete.php",
       type:"POST",
       data:{id:id},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        //alert("Event Removed");
       }
      })

I've hijacked this event to instead open a context menu offering three options:

Edit, Delete Close Menu. If they choose delete it runs the same function as before but with an if statement (aided by sweet alerts) to check they're sure.

If they choose close, it just closes the menu

If they choose edit it sends the Id of the appointment over to a PHP file via AJAX so I can update it. I've noticed when updating a bunch of them the appointment isn't correct after the first couple of opens. So, I added a catch to alert the ID of the appointment before runnning AJAX.When I open my first appointment, I get an alert with the first appointment ID. I close that, then open another, at which point I first get an alert with the first ID, then a second with the new ID, then opening another appointment gives me those two alerts and a third with the third appointments ID and so on... I've tried setting the ID to blank on clicking cancel or save on the edit file but no luck.

Here's the whole code for the event click function:

 eventClick:function(event)
    {

$('.appt_menu').removeClass('hidden').css( {position:"absolute", top:event.pageY, left: event.pageX});

        $('a.close_menu').on("click",function(){
            $('.appt_menu').addClass('hidden');
        })

        $('a.edit_appt').on("click",function(){
            $('.appt_menu').addClass('hidden');

        //show me the ID before sending it via AJAX 
         alert(event.id);  

           $('#modalwindow').load("Form_Edit_Appt.php", {id: event.id}, function(data) { calendar.fullCalendar('refetchEvents');});
$('.backdropper, #modalwindow').addClass('show');


        }); //end of edit appt function

            $('a.delete_appt').on("click",function(){
                $('.appt_menu').addClass('hidden');

     swal({
  title: "Are you sure you want to delete this Appointment?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: ["Not that one!", "Yep, delete it!"],
  //buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Your Appointment has been deleted!", {
      icon: "success",
    });

    var id = event.id;
      $.ajax({
       url:"delete.php",
       type:"POST",
       data:{id:id},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        //alert("Event Removed");
       }
      })    
  } else {
    swal("Your Appointment has not been removed!");
  }
});
}) 
    },

You are binding event handlers every time you do your initial eventClick. Try unbinding with off() every time you set the click handlers so any previously set handlers are removed.

Example:

$('a.edit_appt').off().click(function() {
    //your code
});