arimelody.me/admin/components/credits/addcredit.html

<dialog id="addcredit">
    <header>
        <h2>Add artist credit</h2>
    </header>

    <ul>
        {{range $Artist := .Artists}}
        <li class="new-artist"
            data-id="{{$Artist.ID}}"
            hx-get="/admin/release/{{$.ReleaseID}}/newcredit/{{$Artist.ID}}"
            hx-target="#editcredits ul"
            hx-swap="beforeend"
        >
            <img src="{{$Artist.GetAvatar}}" alt="" width="16" loading="lazy" class="artist-avatar">
            <span class="artist-name">{{$Artist.Name}} <span class="artist-id">({{$Artist.ID}})</span></span>
        </li>
        {{end}}
    </ul>

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

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

    <script type="text/javascript">
        (() => {
            const newCreditModal = document.getElementById("addcredit")
            const editCreditsModal = document.getElementById("editcredits")
            const cancelBtn = newCreditModal.querySelector("#cancel");

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

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

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