Bonjour tout le monde,

J'ai un script (que j'ai chopé dans un forum) qui me permet d'ajouter un textarea ou de l'enlever lorsqu'on appuie sur un bouton.

<div data-role="appendRow">
    <div class="row">
        <div class="col-md-3">Intitulé du document : </div>
        <div class="col-md-7">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-building"></i></span>
                <textarea class="form-control" name="vnomdoc[]"></textarea>
            </div>
        </div>
        <button class="btn btn-sm btn-danger" data-role="remove">
            <i class="fa fa-minus"></i>
        </button>
        <button class="btn btn-sm btn-primary" data-role="add">
            <i class="fa fa-plus"></i>
        </button>
    </div>
</div>

Le script:

<script>
        $(function() {
            // Remove button click
            $(document).on(
                'click',
                '[data-role="appendRow"] > .row [data-role="remove"]',
                function(e) {
                    e.preventDefault();
                    $(this).closest('.row').remove();
                }
            );
            // Add button click
            $(document).on(
                'click',
                '[data-role="appendRow"] > .row [data-role="add"]',
                function(e) {
                    e.preventDefault();
                    var container = $(this).closest('[data-role="appendRow"]');
                    new_field_group = container.children().filter('.row:first-child').clone();
                    container.append(new_field_group);
                }
            );
        });
    </script>

Le code fonctionne bien. Je voulais l'adapter pour pouvoir l'utiliser avec un select, j'ai donc remplacer le textarea par un select listant les données d'une table. Le problème est qu'une fois que le choix est fait dans le select, tous les select qu'on ajoute conserve le choix du premier select. On ne peut donc pas faire un choix pour les clones. 

Merci d'avance de m'aider

Bonjour InvincibleInvincible1,

Tu peux donner le code html  et Js que tu as fait pour le select

OK Mais j'ai juste changer le textarea par le select dans HTML. En ce qui concerne le Js, il clone toute la div row

<div data-role="appendRow">
    <div class="row">
        <div class="col-md-3">Intitulé du document : </div>
        <div class="col-md-7">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-building"></i></span>
                <select name="vnomdoc[]" class="form-control selectpicker" data-live-search="true">
                    <option value="">Choisir le document ...</option>
                    @foreach($document as $documents)
                        <option value="{{ $documents->id }}">{{ $documents->nomdoc }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <button class="btn btn-sm btn-danger" data-role="remove">
            <i class="fa fa-minus"></i>
        </button>
        <button class="btn btn-sm btn-primary" data-role="add">
            <i class="fa fa-plus"></i>
        </button>
    </div>
</div>

Bonjour InvincibleInvincible1 ,

J'ai pas le problème, mais au pire j'ai mis  en commentaire un code pour mettre toujours "Choisir le document ..." sélectionné

https://codepen.io/Zonecss/pen/zYOVKdm

Merci beaucoup AliasDmc; Le script fonctionne correctement mais il y a un petit souci. J'utilise un package qui me permet d'effectuer des recherches dans le select en mettant selectpicker et data-live-search. Quand je n'utilise pas le selectpicker, le script fonctionne correctement mais lorsque je le met, il ne passe pas.