I am having an issue with some code I'm writing for a project. My project is a trading card game collection tracker which allows someone to add or removes cards they own from their collection and keep a digital tracker on their collection.

When I populate the collection portion of my page:

I am creating the buttons so I know that this is working:

    const populateCollection = function () {
      for (const field in cardNames) {
         $('.collection').append('<li class="collection-details">' + cardNames[field] 
     + '<button id="removeCard">Remove Card</button>' + '</li>')
      }
    }

however I cannot get this to work for my buttons:

    const removeCardActivate = function () {
      $('#removeCard').on('click', mtgEvents.onDeleteCard)
    }

I am running both of these functions in this function:

    const onSignIn = function (event) {
      event.preventDefault()
      const form = event.target
      const authData = getFormFields(form)
      authData.credentials.email.toLowerCase()

       mtgApi
        .signIn(authData)
        .then((response) => {
          collectionId = response.cardCollection
          return response
        })
        .then(appUi.onSignInSuccess)
        .then((res) => {})
        .then(appUi.populateCollection)
        .then(appUi.removeCardActivate)
        .catch(appUi.onSignInFailure)
    }

I think it may have something to do with the sync/async but I have no idea how to fix it. I have even tried changing the id to class and adding onclick="..." to the HTML button but those also did not work.