Bonjour,

J'ai un souci d'affichage sur mon formulaire.

Pour être claire j'ai deux sellect qui peuvent être dupliquer en JS autant de fois que nécessaire. Le souci est que l'affichage de la valeur par défauts n'est pas la même pour le dernier élément affiché. Par exemple, si j'affiche 3 éléments, le 1e et seconds afficheront correctement et le troisième de manière incorrecte.

Code HTML :

<div class="card-body">
                  <div class="js-add-field"
                       data-hs-add-field-options='{
                          "template": "#addEducationFieldTemplate",
                          "container": "#addEducationFieldContainer",
                          "defaultCreated": 0
                        }'>






                    <!-- Form Group -->
                    <div class="form-group">
                      <label for="schoolFromMonthLabel" class="input-label">Ajout d'une matière</label>

                      <div class="row mx-n2">
                        <div class="col-sm-8 px-2">
                          <!-- Select -->
                          <select id="matieres" class="js-custom-select custom-select dropdown-toggle" size="1" style="opacity: 0;" name="matieres[]"
                                data-hs-select2-options='{
                                  "minimumResultsForSearch": "Infinity",
                                  "placeholder": "Selectionnez une matière"
                                }'>
                                <option label="empty"></option>
                                <option value="Mathématiques">Mathématiques</option>
                                <option value="Français">Français</option>
                                <option value="Physique-Chimie">Physique-Chimie</option>
                                <option value="Anglais">Anglais</option>
                                <option value="Histoire-Géo">Histoire-Géo</option>
                                <option value="SVT">SVT</option>
                                <option value="SES">SES</option>
                                <option value="Philosophie">Philosophie</option>
                                <option value="Espagnole">Espagnole</option>
                                <option value="SI">SI</option>
                          </select>
                          <!-- End Select -->
                        </div>

                        <div class="col-sm-4 px-2">
                          <!-- Select -->
                          <select id="niveau" class="js-custom-select custom-select dropdown-toggle" size="1" style="opacity: 0;" name="niveau[]"
                                data-hs-select2-options='{
                                  "minimumResultsForSearch": "Infinity",
                                  "placeholder": "Niveau le plus haut"
                                }'>
                            <option label="empty"></option>
                            <option value="Primaire">Primaire</option>
                            <option value="6ème">6ème</option>
                            <option value="5ème">5ème</option>
                            <option value="4ème">4ème</option>
                            <option value="3ème">3ème</option>
                            <option value="2nd">2nd</option>
                            <option value="1ère">1ère</option>
                            <option value="Termiale">Termiale</option>

                          </select>
                          <!-- End Select -->
                        </div>
                      </div>
                    </div>
                    <!-- End Form Group -->


                    <!-- Container For Input Field -->
                    <div id="addEducationFieldContainer"></div>

                    <a href="javascript:;" class="js-create-field form-link btn btn-xs btn-no-focus btn-ghost-primary js-create-field-matiere">
                      <i class="fas fa-plus mr-1"></i> Matière supplémentaire
                    </a>
                  </div>

                </div>

Code JS :

let i = 1;
$(document).on('click', '.js-create-field-matiere', function () {
  $("#addEducationFieldContainer").append(`<div class="form-group">
    <label class="input-label">Ajout d'une matière</label>

    <div class="row mx-n2">
      <div class="col-sm-8 px-2">
        <!-- Select -->
        <select id="matieres" class="js-custom-select-dynamic custom-select dropdown-toggle" size="1"
              data-name="additionalSchoolFromMonthSelect"
              data-hs-select2-options='{
                "minimumResultsForSearch": "Infinity",
                "placeholder": "Selectionnez une matière"
              }'
              name="matieres[${i}]">
          <option label="empty"></option>
          <option value="Mathématiques">Mathématiques</option>
          <option value="Français">Français</option>
          <option value="Physique-Chimie">Physique-Chimie</option>
          <option value="Anglais">Anglais</option>
          <option value="Histoire-Géo">Histoire-Géo</option>
          <option value="SVT">SVT</option>
          <option value="SES">SES</option>
          <option value="Philosophie">Philosophie</option>
          <option value="Espagnole">Espagnole</option>
          <option value="SI">SI</option>

        </select>
        <!-- End Select -->
      </div>

      <div class="col-sm-4 px-2">
        <!-- Select -->
        <select class="js-custom-select-dynamic custom-select dropdown-toggle" size="1"
              data-name="additionalSchoolFromYearSelect"
              data-hs-select2-options='{
                "minimumResultsForSearch": "Infinity",
                "placeholder": "Niveau le plus haut"
              }'
              name="niveau[${i}]">
              <option label="empty"></option>
              <option value="Primaire">Primaire</option>
              <option value="6ème">6ème</option>
              <option value="5ème">5ème</option>
              <option value="4ème">4ème</option>
              <option value="3ème">3ème</option>
              <option value="2nd">2nd</option>
              <option value="1ère">1ère</option>
              <option value="Termiale">Termiale</option>

        </select>
        <!-- End Select -->
      </div>
    </div>
  </div>`);
  i++;
});

Ci dessous, vous trouverez une image avec la première ligne en CSS appliquée et la seconde ligne dont le CSS n'est pas complètement appliqué (généré via le JS)

Merci