Custom Clone Button creates double the clones

[seristee]

I am having an issue with using the plugins custom clone button. What happens is every time i click the clone button i get double the clones. here is my code. any help would be greatly appreciated. How do i get this rectified as I am new to javascript.

//javascript
$('#clonedForm').cloneya({
         minimum           : 1,
         maximum           : 10,
         /* cloneThis         : '.toclone', */
         valueClone        : false,
         dataClone         : false,
         deepClone         : false,
         /* cloneButton       : '.clone', */
         deleteButton      : '.delete',
         clonePosition     : 'after',
         serializeID       : true,
         preserveChildCount: false
     })
     .on('maximum.cloneya', function(event, maximumCount, toClone){
         alert("You can't have more than " + maximumCount + " clones");
     })
     .on('form_input.cloneya', function(event, input, toClone, newClone){
        console.log(toClone.find('id')); 
     });
     $('.customButton').on('click', function(){
         $('#clonedForm').triggerHandler('clone.cloneya',[$('.toclone')]);    
     });

//html

<div class="demo-wrap" id="clonedForm">
            <form action="" id="testForm" method="get" class="tstForm">
                <div class="toclone">
                    <select name="selectInput[]" id="clonedForm_#index#_select" required>
                    <option value=""></option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
                <input type="text" name="textInput[]" size="20" id="clonedForm_#index#_input" required>
                <input type="radio" id="clonedForm_#index#_radio" name="radioInput[]" value="radioYes" required>
                <input type="checkbox" id="clonedForm_#index#_checkbox" name="checkBoxInput[]" value="checkboxYes" required>
                <!-- <a href="#" class="clone">clone</a> -->
                <a href="#" class="delete">delete</a>
                </div>
                <br>
                <br>
                <br>
                <span class="customButton">clone</span>
                <br>
                <br>
                <br>
                <input type="submit" value="submit">
            </form>
    </div>

[solarsilk]

add .first() to the end of your selector, like this:

$('#clonedForm').triggerHandler('clone.cloneya',[$('.toclone').first()]);

[solarsilk]

or better yet, use last() to clone the last clone

$('#clonedForm').triggerHandler('clone.cloneya',[$('.toclone').last()]);

[actual-saurabh]

In these lines:

$('.customButton').on('click', function(){
        $('#clonedForm').triggerHandler('clone.cloneya',[$('.toclone')]);    
});

you have basically asked to clone all the clonable elements (all elements with class .toclone). As @solarsilk has pointed, you'd have to specify the one that you want cloned. Otherwise, if you click the clone button once, you'd get one copy (total 2).

click button again, you'd get 2 X 2 = 4 copies, then 8, then 16. It'd be a nightmare. So, you either use the .first() or .last() modifiers for your selector or use another way to specify which particular .toclone needs to be cloned.