How to submit an AJAX form that is created on the fly?

Question

JavaScript

Friends, it seems like a common thing, but I'm stuck, I've been digging all day and I don't understand how to do it.

There is a script for sending forms from the site with AJAX, everything is simple and works IF the form with id already existed when the page was loaded.
BUT if the id is added dynamically by the CLICK event, for example, by a button, then it turns out that there is no such form for the AJAX script, and they say you need to somehow reload the DOM tree? Or what is needed?

Here is an example of how it works (I simplified the code, left the essence):

Form:

<form id="form1" class="form">
                        <input type="text" value="" placeholder="Введите ваше имя:">
                        <input type="tel" value="" placeholder="Введите ваш телефон:">
                        <a href="#" data-type="submit">ОТПРАВИТЬ ЗАЯВКУ</a>
</form>

Sending:

$(window).load(function () {
    $('#form1').forms({
        ownerEmail: '[email protected]',
        product: 'Заявка с сайта'
    })

js file with logic included at the bottom of the page

$.ajax({
                                type: "POST",
                                url: '/MailHandler.php',
                                data: {
                                    name: _.getValFromLabel($('.name', _.form)),
                                    phone: _.getValFromLabel($('.phone', _.form)),
                                    pro_duct: _.product,
            owner_email:_.ownerEmail,
                                    stripHTML: _.stripHTML
                                }
                            })

/*------------------------------------------------ -------------*/

BUT IF the form id is generated AFTER the page is loaded by the CLICK event, then the form is not sent :(

<a href="#" data-id="['динамический id']" class="btn">услуга</a>

$('.btn').on('click', function () {
    var dataidx = $(this).attr('data-id');
    $('form').attr('id','form'+dataidx);
});

The form:

<form id="form['динамический id']" class="form">
                        <input type="text" value="" placeholder="Введите ваше имя:">
                        <input type="tel" value="" placeholder="Введите ваш телефон:">
                        <a href="#" data-type="submit">ОТПРАВИТЬ ЗАЯВКУ</a>
</form>

Sending:

$(window).load(function () {
    $('#form['динамический id']').forms({
        ownerEmail: '[email protected]',
        product: 'Заявка с сайта'
    })

How to be in that case? How do they deal with such arrangements?
I really don’t want to print out my form for each service at once, I want to dynamically change one form by substituting the service id.

Answer 1

Everything is simple. When you dynamically create a new component on click, after all the scripts have been initialized, the component will not bind to its own logic. Just because first we create - then we initialize the logic. If the logic has already been rendered by the browser, adding new markup won't bind it to its own logic, but that's easy to fix.
We write 2 different functions to a variable. In the first one - dynamically adding markup to the DOM, in the second - the logic that needs to be tied to the markup. I will conditionally call them create() and initAjaxOnForm().
As soon as document ready - in the create callback (we will throw the parent selector into the arguments, where to shoot the markup) then ajaxForm (the component selector into the arguments)
Likewise in btn.click ->
create(node)
ajaxForm('.form')
In general, for such needs, there are Vue / React and others

Answer 2

$(document).on('click', '.btn', function () {
 ...
});