Add in HTML with the help of JavaScript

I am trying to add two “br” after each of my form fields that are not hidden because otherwise, it uses some space in my form and it doesn’t look good. But for some reason it doesn’t appear.

<legend>Ética y Cumplimiento:</legend>
        <fieldset style="border: 1px solid #000;">
            <br>
            <div id="formulario3">
                {% for field in form3 %}
                    {% if field.flags.required %}
                        {{ field.label(text='*' + field.label.text) }}
                    {% else %}
                        {{ field.label }}
                    {% endif %}

                    {% if field.errors %}
                        {{ field(class="is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in field.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ field(class="form-control") }}
                    {% endif %}

                    <script>
                        let elementoseleccionado = document.getElementById({{ field.id }});
                        if ((document.getElementById('{{ field.id }}')).type === 'hidden') {
                            $('label[for="{{ field.id }}"]').css('display', 'none');
                        }
                        else{
                            let linebreak = document.createElement("br");
                            elementoseleccionado.appendChild(linebreak);
                            elementoseleccionado.appendChild(linebreak);
                        }
                    </script>

                {% endfor %}

                <input type="button" class="btn btn-primary" id="morecumplimiento" value="Más">

                <br>
                <br>

            </div>

The error generated by my code is this one:

The HTML generated is this one:

            <legend>Ética y Cumplimiento:</legend>
        <fieldset style="border: 1px solid #000;">
            <br>
            <div id="formulario3">
                
                    
                        <label for="exposicion_politica">* Indique si alguna persona mencionada en el presente formulario es/fue una Persona Expuesta Políticamente (PEP)</label>
                    

                    
                        <select class="form-control" id="exposicion_politica" name="exposicion_politica" required><option value="0">---</option><option value="SI">SI</option><option value="NO">NO</option></select>
                    

                    <script>
                        if ((document.getElementById('exposicion_politica')).type === 'hidden') {
                            $('label[for="exposicion_politica"]').css('display', 'none');
                        }
                        else{
                            let linebreak = document.createElement("br");
                            if ((document.getElementById('exposicion_politica')) !== null && (document.getElementById('exposicion_politica')).value === ''){
                                document.getElementById(exposicion_politica).appendChild(linebreak);
                                document.getElementById(exposicion_politica).appendChild(linebreak);
                            }

                        }
                    </script>

                
                    
                        <label for="ap_nom_etica1">*Apellidos y Nombres 1</label>
                    

                    
                        <input class="form-control" id="ap_nom_etica1" name="ap_nom_etica1" required type="text" value="">
                    

                    <script>
                        if ((document.getElementById('ap_nom_etica1')).type === 'hidden') {
                            $('label[for="ap_nom_etica1"]').css('display', 'none');
                        }
                        else{
                            let linebreak = document.createElement("br");
                            if ((document.getElementById('ap_nom_etica1')) !== null && (document.getElementById('ap_nom_etica1')).value === ''){
                                document.getElementById(ap_nom_etica1).appendChild(linebreak);
                                document.getElementById(ap_nom_etica1).appendChild(linebreak);
                            }

                        }
                    </script>

As you can see the br is not generated and some error apears.

Answer

You can use each loop to iterate through your inputs and check if it is visible if yes then use .after to add <br> tag

Demo Code:

$("select , input").each(function() {
  //check if visible
  if ($(this).is(":visible")) {
    //add br after that elements
    $(this).after("<br/><br/>")
  } else {
    //hide label
    $(this).prev().css('display', 'none');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<legend>Ética y Cumplimiento:</legend>
<fieldset style="border: 1px solid #000;">
  <br>
  <div id="formulario3">
    <label for="exposicion_politica">* Indique si alguna persona mencionada en el presente formulario es/fue una Persona Expuesta Políticamente (PEP)</label>
    <select class="form-control" id="exposicion_politica" name="exposicion_politica" required>
      <option value="0">---</option>
      <option value="SI">SI</option>
      <option value="NO">NO</option>
    </select>
    <label for="ap_nom_etica1">*Apellidos y Nombres 1</label>
    <input class="form-control" id="ap_nom_etica1" name="ap_nom_etica1" required type="text" value="">
    <label for="">*Apellidos y Nom</label>
    <input class="form-control" name="ap_nom_etica1" required type="hidden" value="">
    <label for="">*Apellidos y Nom</label>
    <input class="form-control" name="ap_nom_etica1" required type="text" value="">
  </div>
</fieldset>

Other way would be to directly select the inputs & select and add br tag instead of using each loop .

Demo Code :

$("input:visible ,select:visible").after("<br/><br/>")
$("input:hidden ,select:hidden").prev().css('display', 'none');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<legend>Ética y Cumplimiento:</legend>
<fieldset style="border: 1px solid #000;">
  <br>
  <div id="formulario3">
    <label for="exposicion_politica">* Indique si alguna persona mencionada en el presente formulario es/fue una Persona Expuesta Políticamente (PEP)</label>
    <select class="form-control" id="exposicion_politica" name="exposicion_politica" required>
      <option value="0">---</option>
      <option value="SI">SI</option>
      <option value="NO">NO</option>
    </select>
    <label for="ap_nom_etica1">*Apellidos y Nombres 1</label>
    <input class="form-control" id="ap_nom_etica1" name="ap_nom_etica1" required type="text" value="">
    <label for="">*Apellidos y Nom</label>
    <input class="form-control" name="ap_nom_etica1" required type="hidden" value="">
    <label for="">*Apellidos y Nom</label>
    <input class="form-control" name="ap_nom_etica1" required type="text" value="">
  </div>
</fieldset>