Copying dynamically created divs

Question

I'm trying to copy individual divs created dynamically. I'm using the javascript from this question which works a treat. However, the user should be able to copy any of the dynamically created divs. Unfortunately at the moment only the last div is copied no matter which button is clicked.

Here's my code...

       <?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 ?>

Any hints as to where I'm going wrong or what I've missed will be gratefully received!

Many thanks in advance for your help.

MikeHelland · Accepted Answer · 2014-01-19T10:27:20.283

0

You recreate this chunk of code for every div you make:

<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>

Perhaps what you need is a single duplicate() function like this:

}//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>

And then make sure to pass a parameter to duplicate():

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

EDIT: I changed how the duplicetor id gets set because it wouldn't have worked otherwise

edited Jan 19 '14 at 10:27

answered Jan 19 '14 at 10:21

MikeHelland

1,111
1
7
17

Thanks for the quick response @MazeHatter, unfortunately it isn't copying anything.... – Dave Smith Jan 19 '14 at 10:51
I meant that the PHP foreach loop puts in the – MikeHelland Jan 19 '14 at 10:54
Hi MazeHatter, I thought that's what you were getting at so tried moving the function and changed it as per your suggestion. Alas it doesn't copy anything. – Dave Smith Jan 19 '14 at 11:03
Do you still have this this line of code around still? document.getElementById('add_bin').onclick = duplicate; Either get rid of it, or change it to ...onclick = function() {duplicate();}; – MikeHelland Jan 19 '14 at 11:06
Got it, thanks - added just below the button within the foresach loop and it now works. Will mark as solved. Many thanks for your help. – Dave Smith Jan 19 '14 at 11:13

Copying dynamically created divs

1 Answers1