The selector that should contain all our clonable elements, including the Add Button.

The selector (usually a class) of the clonable element. This is the html chunk that will be repeated.

The class of the button that will fire the toggle method, prompting the cloning action.

The class of the button that will fire the remove method, prompting to remove the clonable element. Important: this element should be inside a clonable element.

The attribute or input tag inside a newly cloned clonable to place the cursor over.

The plugin will clone the last instance of the clonable class. This option will toggle to remove or retain all previous input values.

Option to remove all clones and only retain the original html markup (or the source).

In the demo below, try to click the `add child` button several times. then click the `add person` button.

Demo | remove all instance of nested cloneName

Hopefully, it removed all clone of source elements you created when you added another Person.

Switch console.logging on/off.

This option will be used to increment all values inside a clonable. It uses suffixes (html, value, and any attribute like class, id, etc.) to know which integers will be incremented.

Sample use case:

<input
    id="attr_1"
    class="clonable-increment-id clonable-increment-name"
    type="text"
    name="attr[0]">

In this example, we have the incrementName of clonable-increment with suffixes -id and -name which corresponds with the input tag's id=attr_1 and name="attr[0]". Performing a clone, therefore will result in:

<input id="attr_1" class="clonable-increment-id clonable-increment-name" type="text" name="attr[0]">
<input id="attr_2" class="clonable-increment-id clonable-increment-name" type="text" name="attr[1]">

Notice the cloned input above have an id=attr_2 and name="attr[1]", incremented from the cloned html.

Demo | Using incrementation

The reverse of increment.

Demo | Using decrementation

This option is for limiting the number of clonables.

Note: as of v1.3.1, this option will only work for decrementing clonables

<div class="clonable-block" data-toggle="cloner">
    <div class="clonable clonable-clone-number-decrement" data-clone-number="5">
        <label class="clonable-decrement-html clonable-increment-for" for="topfivethings[0]">Thing #5</label>
        <input id="topfivethings[0]" type="text" class="form-control clonable-increment-id clonable-increment-name" name="topfivethings[0]">
        <button class="btn btn-default clonable-button-close"><i class="fa fa-close"></i></button>
    </div>
    <button type="button" class="btn btn-default clonable-button-add pull-right"><i class="fa fa-plus"></i> Add Child</button>
</div>

Notice on our clonable is another class called clonable-clone-number-decrement, and we've also added an attribute data-clone-number with the value of 5.

Demo | limit clonables to 5

This is a function callback you can hook into before the `cloning` action is fired. It accepts parameters $clone( the clone of the last clonable), index (number of clonables'), and self (a catch-all reference of the jQuery-Cloner itself).

    // html
    <div id="beforeToggle" class="clonable-block">
        <label for="email_1">Emails</label>
        <div class="clonable">
            <div class="form-group">
                <div class="row">
                    <div class="col-sm-10">
                        <input id="email_1" type="email" class="form-control clonable-increment-id clonable-increment-placeholder" placeholder="Email #1">
                    </div>
                    <div class="col-sm-2">
                        <button class="btn btn-default clonable-button-close"><i class="fa fa-close"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <button class="btn btn-success clonable-button-add">Add Email</button>
    </div>

    // main.js
    $('#beforeToggle').cloner({
        beforeToggle: function ($clone, i, self) {
            // console.log(self);
            var $container = self.$container;
            if ($clone.find('input:last').val() == "") {
                $container.find('input').addClass('error');
            } else {
                $container.find('input').removeClass('error');
            }
        },
    });

Demo | using beforeToggle

This will fire after the cloning action is triggered.

Demo | using afterToggle