jqueryで複数のクローンアイテムを取得していますが、ダイナミックループで使用するにはどうすればよいでしょうか？

Question

私は、ユーザーの入力に基づいてdivを複製したいと思います。ユーザーが1を入力すると、divは1回コピーされ、ユーザーが2を入力するとdivは2回コピーされます（以前にコピーされたdivはもちろん削除されます）。

これは私のコードです：

$('input').keyup(function() { 

var dtotal = parseInt($('input').val()); 
var $dragcont = $('#parent'); 
var $dragon = $("#child:not('.cloned')"); 

for(var i=0;i < dtotal; i++){ 
$dragon.clone().addClass('cloned').appendTo($dragcont); 
} 

私はPHP（フォームのアクション）でこれを達成しているが、この場合には、私は、サーバー側をいじることはできませんよ。助けて。

JSfiddle

Answer 1

まず、コピーされるのdivにIDを使用しないようにしてください。 Idは一意であると思われるので、代わりにクラスに変更しました。スタックオーバーフローへ

$('input').keyup(function() { 
 
    var dtotal = parseInt($('input').val()); 
 
    var $dragcont = $('#parent'); 
 
    var $dragon = $(".child:not('.cloned')"); 
 
    
 
    // If you want to remove previously copied. 
 
    $dragcont.find('.child.cloned').remove(); 
 
    
 
    for(var i=0 ;i <dtotal; i++){ 
 
    var $el = $dragon.clone().addClass('cloned'); 
 
    $el.appendTo($dragcont); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <p class="child">Clone me</p> 
 
</div> 
 
    <input type="text"/>