How should I go about adding an edit modal/view for events?

My project high-rolls/timely ( is about creating events that show up in a timeline, with a countdown showing the time left until that event starts or a time since that event has ended, pretty basic so far.

I added a button for adding a new event in the timeline.html template, which opens up a Bootstrap modal with a form and the action is to send a POST to the create_event view:

<button id="addEventButton" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addEventModal">
    Add Event
<div class="modal fade" id="addEventModal" aria-labelledby="addTimelineModalLabel" aria-hidden="true">
    <form action="{% url 'timelines:create_event' %}" method="post">

def create_event(request, timeline_id):
    if request.method == 'POST':
        # TODO validate whether end_date >= start_date
        start_date = request.POST['start_date'] + ' ' + request.POST['start_time']
        end_date = request.POST['end_date'] + ' ' + request.POST['end_time']
        event = Event(
        return HttpResponseRedirect(reverse('timelines:timeline', args=(timeline_id,)))
    return render(request, 'timelines/create_event.html', context={'timeline_id': timeline_id})

And this works well for adding new events.
But what about editing an existing event? I have an anchor in each event div that I want to open up a modal to edit that specific event, but my edit event view takes an ID of the event to be edited, so I thought I have to either add a modal after each event in the for loop (which would fill up the HTML with hidden modals :frowning: ) or I could add a single #editEventModal at the end of the HTML and fill up the form’s action URL at runtime with Javascript, but that also sounds kind of hack-y to me.