formvalidation io validate input then change to select and validate

im new using this amazing framework https://formvalidation.io/
so i have some issues.

I have a big form where i have a
if i submit the form works great and the select i have to select something
But… if a do something that select disappear and appers an input with the same name and id

i mean…. from select change to input
and thats the problem.

When submit that new input not working

This is the actual code

const fv = FormValidation.formValidation(orderForm, {
                fields: {
                    shipperSuburb: {
                        validators: {
                            notEmpty: {
                                message: 'Por favor ingrea el nombre de la colonia.'
                            }
                        }
                    },
                    recipientSuburb: {
                        validators: {
                            notEmpty: {
                                message: 'Por favor ingrea el nombre de la colonia.'
                            }
                        }
                    }
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap5: new FormValidation.plugins.Bootstrap5(),
                    createOrder: new FormValidation.plugins.SubmitButton(),
                    // Submit the form when all fields are valid
                    //defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                    autoFocus: new FormValidation.plugins.AutoFocus()
                }
            }).on('core.form.valid', function() {
                FormValidation.utils.call(
                    createOrder()
                )
            });

This is the select

<div class="mb-3 col-md-6">
                                              <div id="changeShipperSuburb">
                                                  <div class="form-floating">
                                                      <select class="form-select shipperSuburb" name="shipperSuburb" id="shipperSuburb" required=""><option value="Artesanos">Artesanos</option><option value="Capilla de Jesús">Capilla de Jesús</option><option value="El Santuario">El Santuario</option><option value="Sagrada Familia">Sagrada Familia</option><option value="Otro">Otro</option></select>
                                                      <label for="shipperSuburb">Colonia *</label>
                                                  </div>
                                              </div>
                                          <div class="fv-plugins-message-container invalid-feedback"></div></div>

If i select “Otro” the select change to an input

<div class="mb-3 col-md-6">
    <div id="changeShipperSuburb">
        <div class="form-floating">
            <input class="form-control" type="text" name="shipperSuburb" placeholder=" " value="">
            <label for="shipperSuburb">Colonia *</label>
        </div>
    </div>
    <div class="fv-plugins-message-container invalid-feedback"></div>
</div>

So this line
<div class="fv-plugins-message-container invalid-feedback"></div>
does not disappear

And then when submit this input no validate but i cant continue…

Thank you =D