cloneNode doublé js

Bonjour à tous, je vous explique mon problème:
Je suis actuellement en train de créer un formulaire
pour ajouter du contenu dans une navbar, j'ai pour ça un champ titre, menus, sous menus et action.
Je me sers donc de la fonction globale cloneNode pour copier ma div, seulement voilà, elle se double à chaque création, alors que je voudrais qu'elle ne clone que la div de base ou la dernière copiée,
pas celle dont les clones on était insérées. Existe-t'il une fonction qui permettrait de ne copier que le dernier element , ou l’élément de base ?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div class="input-group mb-3" id="action"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-default">Action</span> </div> <input type="text" name="tbData[0][action]" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"> </div>   <script type="text/javascript">                                 function addAction(){                                     var action = document.getElementById('action');                                     var clone = action.cloneNode(true)                                 return action.appendChild(clone);                                                         }                                 function addField(){                                         addAction(clone);                                         div.appendChild(document.createElement("br"));                                                                 }                             </script> <button type="button" onclick="addAction()">+</button>

---

un id doit être unique sur la page ... si tu clones un élément avec un id, pense à modifier l'id du clone
ou utilises des class

hormis ce fait tu ajoutes à chaque fois DANS action
du coup la fois suivant tu clones le tout ...
si tu appendes dans le body

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<div class="input-group mb-3" id="action"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-default">Action</span> </div> <input type="text" name="tbData[0][action]" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"> </div>   <script type="text/javascript">                                 idnr=0                                 function addAction(){                                                                         var action = document.getElementById('action');                                     var clone = action.cloneNode(true)                                    clone.id="action"+ idnr++;                                    document.body.appendChild(clone);                                                         }                                 function addField(){                                         addAction(clone);                                         div.appendChild(document.createElement("br"));                               }                             </script> <button type="button" onclick="addAction()">+</button>

---

Alors si j'appendes dans le body il ne double plus mais ne copie pas le contenu au bon endroit ( dans mon footer dirait-on )

Pièce jointe 542709

ben ne copie pas l'intégralité du contenu ... :koi:
ne clone que le nécessaire ...

Mais je clone bien que le nécessaire mais il me le génére dans mon footer :weird:



Pièce jointe 543083

Non mais ... réfléchis ...
si tu appende DANS l'élement que tu clones ...
la prochaine fois que tu clones il te clone l'élément ajouté précédemment !!!
donc ne clone QUE ce que tu as besoin de cloner, pas le contenant global