Tengo el siguiente formulario HTML y quiero enviar todos los datos usando AJAX, el problema es que no puedo obtener lo que el usuario haya colocado en los input (quite la parte de AJAX y lo sustituir por el `console.log` para el ejemplo). El `+` arriba a la derecha me sirve para dar la opción de agregar más fotos y por ello es que necesito obtener todos los valores del formulario porque nunca serán iguales. 

Intente hacerlo así, pero no funciona.

    $(document).ready(function() {
        $('#Enviar').on('click', function(event) {
            event.preventDefault();
    
            // Serializar el formulario
            var formData = $('#registro').serialize();
    
            console.log(formData);
        });
    });

Este es mi código:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(document).ready(function(){
            var maxField = 6; 
            var addButton = $('#add_gondola');
            var wrapper = $('#field_wrapper_gondola'); 
            var fieldHTML = '<div class="input-group mt-2"><input class="foto-input" type="file" accept="image/*" capture="camera" style="display: none;"><img class="camara" style="height: 100%; width: 100%;" src="https://www.freeiconspng.com/thumbs/camera-icon/camera-icon-21.png" alt="Icono de la cámara"><img class="preview" src="#" alt="Vista previa de la foto" style="display:none;"><button class="btn btn-circle btn-danger mt-2 borrarBtn" style="display: none;"><i class="fas fa-trash"></i></button><a href="javascript:void(0);" class="btn btn-circle btn-danger mt-2 ml-2" id="remove_gondola"><i class="fas fa-minus"></i></a></div>';
            var x = 1; 
            $(addButton).click(function(){ 
                if(x < maxField){ 
                    x++; 
                    $(wrapper).append(fieldHTML); 
                }
                else alert("Solo se pueden añadir 6 fotos")
            });
            $(wrapper).on('click', '#remove_gondola', function(e){ 
                e.preventDefault();
                $(this).parent('div').remove(); 
                x--;
            });
        });
        
        $(document).on('click', '.camara', function() {
        var inputFile = $(this).siblings('input[type=file]');
        inputFile.click();
    });

    $(document).on('change', 'input[type=file]', function() {
        var archivo = this.files[0];
        var vistaPrevia = $(this).siblings('.preview');
        var camaraIcon = $(this).siblings('.camara');
        var borrarBtn = $(this).siblings('.borrarBtn');

        if (archivo) {
            var lector = new FileReader();

            lector.onload = function(e) {

               vistaPrevia.attr('src',e.target.result);
                vistaPrevia.css({
                   'display': 'block',
                   'height': '100%',
                   'width': '100%'
               });
                camaraIcon.hide();
                borrarBtn.show();
            };

            lector.readAsDataURL(archivo);
        }
    });

    $(document).on('click', '.borrarBtn', function(event) {
                event.preventDefault(); // Detener el comportamiento predeterminado del botón

                var archivo = $(this).siblings('input[type=file]');
                var vistaPrevia = $(this).siblings('.preview');
                var camaraIcon = $(this).siblings('.camara');
                var borrarBtn = $(this);

                vistaPrevia.val('');
                vistaPrevia.attr('src', '#').hide();
                archivo.val('');
                camaraIcon.show();
                borrarBtn.hide();
            });


    //Aqui es donde estoy intentando obtener toda la información del formulario      
    $(document).ready(function() {
        $('#Enviar').on('click', function(event) {
            event.preventDefault();

            // Serializar el formulario
            var formData = $('#registro').serialize();

            console.log(formData);
        });
    });

<!-- language: lang-css -->

    .pull-right {
    float: right !important;
    }

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Formulario con JSON</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    </head>
    <body>
    <form id="registro">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
          <h6 class="m-0 font-weight-bold text-primary">Gondola <a href="javascript:void(0);" style="display:flex;  align-items:center; text-decoration:none;" class="pull-right" id="add_gondola"><i class="fas fa-plus"></i></a></h6>
      </div>
      <div class="card-body">
        <div class="col-sm-6" id="field_wrapper_gondola">
        <label for="descripcion_gondola" style="width:100%">Descripción</label>
        <textarea id="descripcion_gondola" class="form-control mb-2"></textarea>
        <div class="input-group">
            <input class="foto-input" type="file" accept="image/*" capture="camera" style="display: none;">
                <img class="camara" style="height: 100%; width: 100%;" src="https://www.freeiconspng.com/thumbs/camera-icon/camera-icon-21.png" alt="Icono de la cámara">
                <img class="preview" src="#" alt="Vista previa de la foto" style="display:none;">
            <button class="btn btn-circle btn-danger mt-2 borrarBtn" style="display: none;"><i class="fas fa-trash"></i></button>
        </div>
    </div>
    </div>
    </div>
    </form>
    <button class="btn btn-primary mt-2 pull-right" id="Enviar">Enviar</button>
    </body>
    </html>

<!-- end snippet -->