arimelody.me/admin/components/tracks/addtrack.html

<dialog id="addtrack">
    <header>
        <h2>Add track</h2>
    </header>

    <ul>
        {{range $Track := .Tracks}}
        </li>
        <li class="new-track"
            data-id="{{$Track.ID}}"
            hx-get="/admin/release/{{$.ReleaseID}}/newtrack/{{$Track.ID}}"
            hx-target="#edittracks ul"
            hx-swap="beforeend"
        >
            {{.Title}}
        </li>
        {{end}}
    </ul>

    {{if not .Tracks}}
    <p class="empty">There are no more tracks to add.</p>
    {{end}}

    <div class="dialog-actions">
        <button id="cancel" type="button">Cancel</button>
    </div>

    <script type="text/javascript">
        (() => {
            const newTrackModal = document.getElementById("addtrack")
            const editTracksModal = document.getElementById("edittracks")
            const cancelBtn = newTrackModal.querySelector("#cancel");

            editTracksModal.addEventListener("htmx:afterSwap", () => {
                newTrackModal.close();
                newTrackModal.remove();
            });

            cancelBtn.addEventListener("click", () => {
                newTrackModal.close();
                newTrackModal.remove();
            });

            newTrackModal.showModal();
        })();
    </script>
</dialog>