How to create forms in django formset with javascript?

Question

JavaScript

I need help with the problem of creating additional fields in django formset.
Those who work with Django know that there are form sets. On the page, they can be created dynamically, but with specific id. That is:
form.html

<form action="." method="post" class="recipe_form">
    <input type='hidden' name='csrfmiddlewaretoken' value='6c8MxA6cAjA2a75H7QbATliuBwO8Xy1xl4JNgga4FUVpQruRCYMSolZJY2eSdCYn' />
    <div>
        <div style="margin: 5px">
            <div class="">
                <label for="id_name">Name:</label>
                <input id="id_name" maxlength="100" name="name" type="text" required />
            </div>
        </div>
        <div style="margin: 5px">
            <div id="management-form">
                <input id="id_book_set-TOTAL_FORMS" name="book_set-TOTAL_FORMS" type="hidden" value="1" />
                <input id="id_book_set-INITIAL_FORMS" name="book_set-INITIAL_FORMS" type="hidden" value="0" />
                <input id="id_book_set-MIN_NUM_FORMS" name="book_set-MIN_NUM_FORMS" type="hidden" value="0" />
                <input id="id_book_set-MAX_NUM_FORMS" name="book_set-MAX_NUM_FORMS" type="hidden" value="10" />
            </div>
            <div id="formset">
                <div class="formset-item" id="formset-item-0">
                    <label for="id_book_set-0-title">Title:</label>
                    <input id="id_book_set-0-title" maxlength="100" name="book_set-0-title" type="text" />
                    <input type="button" class="add-formset" value="add" />
                </div>
            </div>
        </div>
    </div>
    <input type="submit" name="submit" value="Submit" class="button">
</form>

This piece of code has a block with id="formset". When you click on the add button , a block with the following content should be created:

<div class="formset-item" id="formset-item-1">
    <label for="id_book_set-1-title">Title:</label>
    <input id="id_book_set-1-title" maxlength="100" name="book_set-1-title" type="text" />
    <input type="button" class="add-formset" value="add" />
</div>

And change the value from 1 to 2 in

<input id="id_book_set-TOTAL_FORMS" name="book_set-TOTAL_FORMS" type="hidden" value="2" />

Also, the maximum number of fields that can be added is limited by the value in

<input id="id_book_set-MAX_NUM_FORMS" name="book_set-MAX_NUM_FORMS" type="hidden" value="10" />

Please suggest a solution to this problem. I'm not strong in javascript, I could only write code that simply adds blocks with the corresponding IDs and removes them. But it is necessary that the order in the IDs be observed when deleting blocks. This I couldn't figure out.
The Djnago admin panel has an implementation of this functionality. But my knowledge of javascript does not allow me to understand the code.
I also found in the admin panel that django developers use this code as a basis. But how can you adapt it to your needs again?