Stopping AJAX PUT page refresh in A-Frame scene

Question

So I'm working on a basic scene where someone can practice flashcards. After they see the answer, they can pick "wrong, hard, or easy."

If they click Wrong or Hard, it needs to update that card's model in the database. The update is working fine using AJAX, but it always results in the scene refreshing and breaking a couple elements, then I have to refresh again to fix it.

I've tried using preventDefault() but it's not working, anything else that could solve it?

Here's the JS:

$(".hard-button").each(function() {
  this.addEventListener('click', (e) => {
    e.preventDefault();
    const cardID = this.dataset.cardId;
    const deckID = this.dataset.deckId;
    $.ajax({
      type: "PUT",
      url: `/decks/${deckID}/cards/${cardID}/hardButton`
    });
  });
})

And then here's the element(s) I'm calling it on:

<a-box 
  id="hard-answer-button" class="answer-button correct-button hard-button" 
  scale="1.5 .6 .0001" position="0 0 0" visible="true" 
  draw="width: 400; height: 160; background: #FFF" 
  htmltexture="asset:#hard-answer" 
  data-card-id="<%=card.id%>" 
  data-deck-id="<%[email protected]%>">
</a-box>

It's not a form since it doesn't need to submit any data, just needs to run a function in the controller.