document.addEventListener DOMContentLoaded in an HTMX template

I am using HTMX to post a form updating this element.
This is the content that gets injected post a POST.

{% for error in errors %}
    {% for e_key, e_value in error.items %}
        {{ e_value }}
    {% endfor %}    
    {% empty %}
    All Okay
    <script>
    document.addEventListener("DOMContentLoaded", () =>
    {
        foo({{ config_id }});
    });
    </script>
{% endfor %}
<script>
let foo = async (config_id) =>
{
    return fetch("some-url" + config_id)
    .then(response => response.json())
    .then(response =>
    {
        console.log(response);
    });
}
</script>

The issue here is that document.addEventListener("DOMContentLoaded" has no effect since the HTMX is replacing the content post loading of the page. So how do I get call foo() post HTMX’s content replacement ?

Look at the events that HTMX exposes to you. Don’t try to manage this at the document level, use the features provided by HTMX.