Error creating a form-outline dynamically

Hi, can you help me fix an error? I get an error when dynamically creating a form-outline. The error is this: bootstrapMDB.js:20 Uncaught TypeError: Cannot read properties of null (reading 'classList') at Object.addClass (bootstrapMDB.js:20:6271) at Xo._showPlaceholder (bootstrapMDB.js:20:94736) at Xo._getLabelData (bootstrapMDB.js:20:93699) at Xo.init (bootstrapMDB.js:20:93155) at new Xo (bootstrapMDB.js:20:92899) at Xo.getOrCreateInstance (bootstrapMDB.js:20:92224) at HTMLButtonElement. (FactVerificar2.aspx:579:23) at HTMLButtonElement.dispatch (jquery-3.7.1.min.js:2:40035) at v.handle (jquery-3.7.1.min.js:2:38006)

And the code: $('#btnGenerarDiv').click(function () { event.preventDefault(); // Evita la recarga de la página // Generar el HTML dinámico para el nuevo form-outline var divHTML = <div class="form-outline mb-4 data-mdb-input-init"> <input type="text" id="form${inputCount}" class="form-control" /> <label class="form-label" for="form${inputCount}">Nuevo Input ${inputCount}</label> </div>;

        // Agregar el nuevo form-outline al contenedor
        $('#contenedorInputs').append(divHTML);

        // Inicializar el nuevo input con MDBootstrap para asegurar el comportamiento de la etiqueta flotante
        mdb.Input.getOrCreateInstance(document.getElementById('form' + inputCount));

        // Incrementar el contador para generar IDs únicos
        inputCount++;