Cannot read property style of null after AJAX html()

I need more code to be able to locate the issue. Your variables may be losing reference upon AJAX calls, or your scripts run before DOM is fully loaded.

Thank you for your response! Well, I have a main page that users can open directly. It is a multi-step registration. Every registration step is saved under a separate .PHP file (just for data passing, it was .HTML), and every time user clicks the "Next Step" button, the entered data are validated and if everything's okay, it will make an AJAX call to the file that has the contents of the next step. Then, contents of that file are being inserted into the main file, via $("#main-inner-content").html(<retrived data from AJAX call>).

The retrieved data are HTML code and some internal JS code in <script> tag. Now, this works correctly, but the problems begin when retrieved data are being displayed. So they will be inserted as said, everything will work properly. Now here it gets pretty messy. So inside that step file (retrieved data), as I mentioned, there is also some JS code. This is because, in that step, the user can add or remove slots with data. And thus, I need to handle removing and inserting slots with two input boxes. These handlers are in mentioned internal JS code, which is inside the step file (retrieved data). Also, this works like a charm, but the problem is only when an MDB .form-outline input is being inserted in that internal JS file - it does what I described.

This AJAX call handles loading from step file to main file:

$.ajax({
        url: `blocks/steps/${nextStepSlug}.php?${$.param( passedData )}`,
        success: (result) => {
            Animation.BtnChange( ".nextStep-btn", `<i class="far fa-check-circle"></i>` );
            Animation.Do( "#main-inner-content", "fade-out-down", ()=>{
                $("#main-inner-content").html(result);
                $("#main-inner-content").removeClass("fade-out-down");
                Animation.Do( "#main-inner-content", "fade-in-up" );
                Stepper.current_step_index = nextStepIndex;
            }, 0, 800 );
        },
        error: (e) => {
            console.error(e);
        }
    });

These are the mentioned handlers in the step file that are changing the contents of the slots. Here, the input boxes are being inserted (everything is being inserted and displayed correctly, besides that input boxes) and these boxes are causing problems.

function HandleAdd(slot) {
    $(`#slot-${slot}`).html(`
        <div class="slot-card populated" id="slot-card-${slot}">
            <span class="remove-slot-btn" onclick="HandleRemove(${slot})"><i class="fas fa-trash-alt"></i></span>
            <div class="d-flex flex-column">
                <div class="form-outline mt-2">
                    <input type="text" id="slot-${slot}-input-name" class="form-control validate-this-box"/>
                    <label class="form-label" for="slot-${slot}-input-name">Meno...</label>
                </div>
                <div class="form-outline mt-2">
                    <input type="number" id="slot-${slot}-input-age" class="form-control validate-this-box"/>
                    <label class="form-label" for="slot-${slot}-input-age">Vek...</label>
                </div>
            </div>
        </div>
    `);
    const animType = slot <= 3 ? "down" : "up";
    Animation.Do( `#slot-card-${slot}`, `fade-in-${animType}` );
}

function HandleRemove(slot) {
    const animType = slot <= 3 ? "up" : "down";
    Animation.Do( `#slot-card-${slot}`, `fade-out-${animType}`, () => {
        $(`#slot-${slot}`).html(`
            <div class="slot-card unpopulated" onclick="HandleAdd(${slot})" id="slot-card-${slot}">
                <div class="slot-add-icon"><i class="fas fa-plus"></i></div>
            </div>
        `);
        Animation.Do( `#slot-card-${slot}`, "zoom-in" );
    } );
}

There is a lot of information and I don't think this will be discussed much. I'm just reporting this in case that someone has this problem as well, or just to let you know. Although if you can say where could be the problem, I would be really happy :)

Not so great workaround

We can use this input:

<input class="form-control rounded" placeholder="Enter name...">

And it will work, it just won't have that nice label animation... I'm just wondering if we can somehow make it work.