HTML DOM Element cloneNode()

[enteR]

Hallo 

Ich habe folgendes Problem 

ich würde gerne 2 inputfelder und 2 selectfelder über einen button kopieren. 
das funktioniert soweit auch ganz gut. 

Jedoch ist das problem jetzt das ich bei meinen 2 selectboxen entweder keinen inhalt habe oder aber ich nichts selectieren kann. 
Das Problem einmal visuell als gif 
https://gifyu.com/image/S3Q1Q

HTML

Code:

<section class="mb-3" id="SchadenortabweichendSection" style="display: none">
                                    <div class="card">
                                        <h5 class="card-header">Schadensort Abweichend
                                            <button class="btn btn-primary" type="button" onclick="myFunction()">Copy
                                            </button>
                                        </h5>
                                        <div class="card-body">
                                            <div id="tocopy">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <input name="form_schadenortabweichend_name[]"
                                                                       type="text" class="form-control"
                                                                       placeholder="Vorname/Nachname">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <select class="bootstrap-select"
                                                            name="schadenort_ansprechpartner_six_geschoss[]">
                                                            <option value="">Geschoss</option>
                                                            <option value="KG">KG</option>
                                                            <option value="UG">UG</option>
                                                            <option value="EG">EG</option>
                                                            <option value="1. OG">1. OG</option>
                                                            <option value="2. OG">2. OG</option>
                                                            <option value="3. OG">3. OG</option>
                                                            <option value="4. OG">4. OG</option>
                                                            <option value="5. OG">5. OG</option>
                                                            <option value="6. OG">6. OG</option>
                                                            <option value="7. OG">7. OG</option>
                                                            <option value="8. OG">8. OG</option>
                                                            <option value="9. OG">9. OG</option>
                                                            <option value="10. OG">10. OG</option>
                                                            <option value="11. OG">11. OG</option>
                                                            <option value="12. OG">12. OG</option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <select class="bootstrap-select"
                                                                    name="schadenort_ansprechpartner_six_lage[]">
                                                                <option value="">Lage in der Etage</option>
                                                                <option value="Links">Links</option>
                                                                <option value="Mitte">Mitte</option>
                                                                <option value="Rechts">Rechts</option>
                                                                <option value="Mitte Links">Mitte Links</option>
                                                                <option value="Mitte Rechts">Mitte Rechts
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <input name="schadenort_ansprechpartner_six_telefon[]"
                                                                       type="text" class="form-control"
                                                                       placeholder="Telefon/Mobil">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Weitere Adressen -->
                                            <div id="toinsert"></div>
                                        </div>
                                    </div>

                                </section>

JS



[url=https://www.basicthinking.de/blog/2018/05/03/gif-erstellen/][/url]

[enteR]

Irgendwie wir der JS Code nicht angezeigt leider kann ich diesen beitrag auch nicht mehr bearbeiten. 

Code:

        function myFunction() {
            const node = document.getElementById("tocopy");
            const clone = node.cloneNode(true);
            document.getElementById("toinsert").appendChild(clone);
        }

ich würde mich sehr freuen wenn mit jemand helfen könnte. 
vielen lieben dank.

[rzscout]

Hi enteR,
du solltest ersteinmal nicht die ID mit-klonen. Wenn eine ID zweimal vorkommt, kann es zu Fehlern kommen. Hier würde ich dir empfehlen mit Klassen zu arbeiten. Was du auch machen kannst ist ein neues SELECT-Element zu erstellen und nur die Kind-Elemente zu klonen, aber auch hier Klassen verwenden zum selektieren.

Wenn du damit nicht weiter kommst, dann einfach ins Forum schreiben. Wir finden eine Lösung.

Viel Erfolg

rzscout