Form added via JS JQuery is in DOM but not visible

Question

I try to add a form dynamically via JQuery as a table row. I have a table where a form should be rendered under a certain table row. But when I add a row that is surrounded by a form tag, the row is in the DOM, but not visible.

The row added row is greyed out like a meta-tag or a script tag. But there is no indicator why it is like that. The display property is not on 'none' and even with Jquery I cant make it visible with $(#test-modal-created-update-row).show();

function generateUpdateForm(event, ereignis) {
    // Remove the previously added update-row
    $('#test-modal-created-update-row').remove();

    // The property from the above row must be selected correctly
    let isSelected = (aktion, value) => {
        if (aktion === value) {
            return "selected";
        }
        return "";
    };

    // Get some labels from the cache and change them into a fitting format
    let lagerorte = JSON.parse(localStorage.getItem('lagerorte'));
    let lagerorteLabel = lagerorte.map((value) => {
        return value.lagerort
    });

    // Begin building the new row that is supposed to edit the above table row entry
    let row = $(`<tr id='test-modal-created-update-row'></tr>`);

    let form = $(`<form id="test-modal-created-update-row-form">`);

    form.append(`<td>
                    <input name="ereignis_id" type='text' value='${ereignis.ereignis_id}' style='display: none'>
                </td>
                <td>
                <select class="form-input input-selection" name="aktion">
                    <option ${isSelected(ereignis.aktion, "Anlage")} value="Anlage">Anlage</option>
                    <option ${isSelected(ereignis.aktion, "in Bearbeitung")} value="in Bearbeitung">in Bearbeitung</option>
                    <option ${isSelected(ereignis.aktion, "Umlage")} value="Umlage">Umlage</option>
                    <option ${isSelected(ereignis.aktion, "Rückgabe")} value="Rückgabe">Rückgabe</option>
                    <option ${isSelected(ereignis.aktion, "Abtrennung")} value="Abtrennung">Abtrennung</option>
                </select>
                </td>
                <td>
                    <input name="lagerort" class="form-input input-text" id="test-modal-created-update-row-lagerort" type='text' value='${ereignis.lagerort}'>
                </td>
                <td colspan="2" class="test-modal-created-update-row-button-container">
                <button type="submit" class="pri-button" value="submit">Änderung speichern</button>
                </td>`);

    row.append(form);

    $(event.currentTarget).after(row);

    // Add an autocomplete option. Use the values we obtained from the cache
    $('#test-modal-created-update-row-lagerort').autocomplete(
        {
            source: lagerorteLabel
        }
    );

    //Add a listener to send the form to the server after submit
    $('#test-modal-created-update-row-form').on("submit", (event) => {
        submitUpdatedEreignis(event);
    });
}