Javascript 复制动态创建的div

我正在尝试复制动态创建的各个div。我正在使用javascript，从中可以获得一种享受。但是，用户应该能够复制任何动态创建的div。不幸的是，目前无论单击哪个按钮，都只复制最后一个div

这是我的密码

       <?php    $ii=0;  //set counter

            foreach($bin_question_data as $k=>$v){ //loop through each section to create div ?>

               <div id="duplicater<?php echo $ii;//use counter to create individual div id ?>">

                  <h4><?php echo $v[0]['bintype'];?></h4>

          <?php foreach($v as $vv){ //loop through section elements to display questions?>

                           <?php echo $bin_question=$vv['binquestiontext'];
                                 $questionid=$vv['binquestionid'];?>


                    <!--questions are dynamically created here-->       

            } //end loop through section questions ?>

               </div><!-- end div to be duplicated-->

                    <!--Add button to duplicate preceding div-->

        <p><input type="button" name="add_bin" 
        id="add_bin<?php echo $ii;?>" onlick="duplicate()" value="Add <?php echo $v[0]['bintype'];?> bin" /></p>

                <!--script to carry out duplication-->

            <script type="text/javascript">

            document.getElementById('add_bin<?php echo $ii;?>').onclick = duplicate;


            var i = 0;
            var original = document.getElementById('duplicater<?php echo $ii;?>');


                function duplicate() {
                   var clone = original.cloneNode(true); // "deep" clone
                   clone.id = "duplicetor" + ++i; // there can only be one element with an ID
                   original.parentNode.appendChild(clone);
                }
            </script>



    <?php   $ii++; //increase counter   

    }//end original section loop ?>         

任何关于我错在哪里或我错过了什么的提示都将被感激地接受

---

非常感谢您的帮助。

您为制作的每个div重新创建了这段代码：

<script type="text/javascript">

document.getElementById('add_bin<?php echo $ii;?>').onclick = duplicate;


var i = 0;
var original = document.getElementById('duplicater<?php echo $ii;?>');


function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicetor" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
}
</script>

也许您需要的是这样一个单一的复制函数：

}//end original section loop ?>  
<script>
function duplicate(index) {
    var original = document.getElementById('duplicater' + index);
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicetor" + original.parentNode.childNodes.length; 
    original.parentNode.appendChild(clone);
}
</script>

然后确保传递要复制的参数：

<input type="button" name="add_bin" 
    id="add_bin<?php echo $ii;?>" onlick="duplicate(<?php echo $ii;?>)" ...

---

编辑：我更改了duplicetor id的设置方式，因为如果不是这样，它将无法工作

感谢@MazeHatter的快速响应，不幸的是，它没有复制任何内容……我的意思是PHP foreach循环将为每个函数设置一个循环，这意味着到最后，您的文档将有许多重复的函数，而不是一个。它们还依赖于原始变量。你应该移动函数复制{从foreach循环中编码，这样它只会在文档中出现一次。然后传递并接受参数，这样您就可以获得正确的原始值。嗨，MazeHatter，我想这就是您要得到的，所以尝试移动函数并根据您的建议对其进行更改。唉，它没有复制任何内容。您仍然有这行代码吗l？document.getElementById'add_-bin'。onclick=duplicate；要么将其删除，要么将其更改为…onclick=function{duplicate；}；获得它，谢谢-添加了document.getElementById'add_-bin'。onclick=function{duplicate；}就在前面的循环中的按钮下方，现在可以工作了。将标记为已解决。非常感谢您的帮助。