I want my user to press a button to "attend" then show a "thank you" and remove the button.

Here's my button:

    <div class="col-6 offset-3">
      <form action="/events/<%= event._id%>/guests" method="POST" novalidate class="needs-validation">
            <div class="d-grid gap-2 col-6 mx-auto mb-2">
              <button id="attendingBtn" onclick="buttonDisappear()" class="btn btn-primary mb-3">I'm attending</button>
            </div>
          </form>        
        </div>

When I use remove() in my function (below) the button disappears after it's clicked but doesn't hit the route or send data to my db:

function buttonDisappear() {
    document.getElementById("attendingBtn").remove();
}

But when I use style.display = none; the button disappears until the page reloads and the button is back.

function buttonDisappear() {
    document.getElementById("attendingBtn").style.display = 'none';
}

This is because I have a res.redirect back to the page in my function (below).

module.exports.addGuest = async (req, res) => {
    const event = await Event.findById(req.params.id);
    const guest = new Guest(req.body.guest);
    event.guests.push(guest);
    await guest.save();
    await event.save();
    res.redirect(`/events/${event._id}`);
}

How do I get the button to POST data then have the card show a "thank you" or just have the button go away?