Comment puis-je créer des champs de saisie dynamique en utilisant bootstrap

Question

J'ai créé les champs de saisie mais quand je clique sur les deux premiers, ça marche bien jusqu'à ce que je demande la troisième qui vient entre les deux premiers et aussi entre les deux. certains m'aident s'il vous plaît. voici mon code javascript:

<script type="text/javascript"> 

    $(document).ready(function() { 

    it to after "after-add-more" div class. 
     $(".add-more").click(function(){ 
      var html = $(".copy-fields").html(); 
      $(".after-add-more").after(html); 
     }); 

     $("body").on("click",".remove",function(){ 
      $(this).parents(".control-group").remove(); 
     }); 

    }); 

</script> 

Answer 1

$(document).ready(function() { 
 
    $(".add-more").on('click', function(){ 
 
     var html = $(".copy-fields").clone(); 
 
     $(".after-add-more").after(html[0]); 
 
    }); 
 

 
    $("body").on("click",".remove",function(){ 
 
     $(this).parents(".control-group").remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <button class = "add-more">ADD</button> 
 
    <div class = "after-add-more"></div> 
 
    <div class = "copy-fields"><input type = "text" /></div> 
 
</div>

Parce que vous essayez de copier le contenu html de classe .copy champs, Utiliser clone() au lieu html(), puis utiliser html [0] pour insérer après comme suit:

$(document).ready(function() { 
    $(".add-more").click(function(){ 
     var html = $(".copy-fields").clone(); 
     $(".after-add-more").after(html[0]); 
    }); 

    $("body").on("click",".remove",function(){ 
     $(this).parents(".control-group").remove(); 
    }); 
});