Currently, I have a code that keeps updating a list of "cards", during setup it applies this code to add an edit button that fires a universal modal:

$("#C" + cardID + "Edit").off('click').click(function() {
    editCard(cardID);
});

Where cardID is in a loop that sets every card, and goes from 1 to 5 for my cards (C1Edit, C2Edit, etc). I am using .off('click') as currently the same code that keeps the values updated adds the events to the buttons in the cards.

The function editCard() is as follows:

function editCard(id) {
    selectedCard = id;
    $("#cardEditName").val($("#C" + id + "T").html());
    $("#cardEditUnit").val($("#C" + id + "U").html());
}

The issue is, when I click on the button #C2Edit, I get an id of 5. Which means that somehow the function is trying to access the current value of cardID, instead of taking the value when button was created.

I am not really sure how to resolve this issue, or if there is something obvious that I missed (which I expect to be the case).

My loop:

for (element in result) {
   cardID = element;
   .
   .
   $("#C" + cardID + "Edit").off('click').click(function() {
    editCard(cardID);
   });
}

I know that my loop should work fine, as other fields that are set (I am setting a number of fields at once) are appearing correctly as far as I can see.