jQuery widgets not working for dynamically added formset forms

I have a form and a related formset in my view/template. For several fields I use widgets: Select2 and a calendar (date-picker) from django admin app.

I also use dynamic addition of formset forms.

When I render a template for the first time, all widgets work fine. But when I add new formset form, widgets of this new form don't work.

I've read existing questions on this kind of problem: 1, 2, 3, 4, but they either not applicable for me, or not helping (2 and 3), or may be I am just doing something wrong (most likely - I'm new to it).

Much appreciated for any tips.

HTML:

{% extends "docs/base.html" %}
{% load static %}

{% block extrahead %}
    {{ block.super }}
    {{ form_matter.media.css }}

    <link href="/static/django_select2/select2.min.css" type="text/css" media="screen" rel="stylesheet">
{% endblock %}

{% block content %}

    {% if mat_id == None %}
        <form id="MatterForm" action="{% url 'matter_create_url' %}" enctype="multipart/form-data" method="post">
    {% else %}
        <form id="MatterForm" action="{% url 'matter_edit_url' mat_id=mat_id %}" enctype="multipart/form-data" method="post">
    {% endif %}

        {% csrf_token %}
        <fieldset>
            {% for field in form_matter %}
                <div class="form-row">
                    {% if field.errors %}
                        <div>{{ field.errors }}</div>
                    {% endif %}
                    <label class="form-label">{{ field.label_tag }}</label>
                    <div class="form-input">{{ field }}</div>
                </div>
            {% endfor %}
            <h3>RESOLUTIONS</h3>

            <div id="form_set">
                {{ formset_resolutions.management_form }}
                {% for form in formset_resolutions %}
                    <div class="formset-form">
                        {% for hidden in form.hidden_fields %}
                            {{ hidden }}
                        {% endfor %}
                        {% for field in form.visible_fields %}
                            <div class="form-row">
                                {% if field.errors %}
                                    <div>{{ field.errors }}</div>
                                {% endif %}
                                <label class="form-label">{{ field.label_tag }}</label>
                                <div class="form-input">{{ field }}</div>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </fieldset>
        <br>
        <button class="btn" type="button" id="add_form" style="margin: 0 0 0 25px">ADD</button>
        <button class="btn" type="submit" style="margin: 0 0 0 25px">SAVE</button>
        <br><br><br>
        <div id="empty_form" style="display:none">
            <div class="formset-form">
                {% for field in formset_resolutions.empty_form.visible_fields %}
                    <div class="form-row">
                        {% if field.errors %}
                            <div>{{ field.errors }}</div>
                        {% endif %}
                        <label class="form-label">{{ field.label_tag }}</label>
                        <div class="form-input">{{ field }}</div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </form>

<script type="text/javascript">window.__admin_media_prefix__ = "{% static 'admin/' %}";</script>
<script type="text/javascript" src="/jsi18n/"></script>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/django_select2/select2.min.js"></script>
<script>
    $('#add_form').on('click', function() {
        var form_idx = $('#id_resolution_set-TOTAL_FORMS').val();
        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
        $('#id_resolution_set-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    });
</script>

<script>$('div.form-row:has(label.form-label:has(label[for$="-DELETE"]))').css('background-color', '#ffc7c7')</script>
{{ form_matter.media.js }}
{% endblock content %}

Copyright Notice：Content Author:「DmRvng」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/58042935/jquery-widgets-not-working-for-dynamically-added-formset-forms