How do you properly clone something in Javascript/JQuery?

Question

I'm using .clone() to duplicate a form. I make small changes to the clone and then place it after the last form. As you can see from the screenshot it's mostly working; they look identical. The application (Django/Python) can process the clone as well once I press save.

The problem is the calendar widget does not open when clicked (on the clone form). It does open if I click on the widget button for a form that already exists on the page when it first loads (not a clone). But on my clones the date picker does not open.

What it should look like after I click on it (instead nothing happens):

The cloned html seems to look identical in all the right ways.

Existing form:

Clone:

EDIT Event Listeners: Looking at the Event Listeners for the tag the on click event seems to me missing.

Existing Form:

Clone:

Is something missing from the cloned html? Or is there something behind the scenes that is not working? I just don't understand what is broken here.

JS/JQuery:

function cloneMore(selector, prefix,form_class) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
    newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-', '-' + total + '-');
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');

    });
    newElement.find('label').each(function() {
        var forValue = $(this).attr('for');
        if (forValue) {
          forValue = forValue.replace('-' + (total-1) + '-', '-' + total + '-');
          $(this).attr({'for': forValue});
        }
    });
    total++;
    $('#id_' + prefix + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
    return false;
}

        $(document).on('click', '.add-form-row', function(e){
            e.preventDefault();
            cloneMore('.form-row-payment:last', 'payment_invoice','form-row-payment');
            return false;
        });

HTML:

 {{ payments_formset.management_form }}
    {{ payments_formset.media }}

<h3>Payments</h3>
            {% for formpay in payments_formset %}
                <div class="form-row form-row-payment row container"  name="payment_form" style="padding:0px;" id="payment_formset">
                    {{ formpay.non_form_errors }}
                    {{ formpay.non_field_errors }}

                    {% for hidden in formpay.hidden_fields %}
                    {{ hidden }}
                {% endfor %}                            
                {% for field in formpay %}
                    {% if field.name != 'index' and field.name != 'invoice'%}

                        <div class="col-sm">
                            {{ field.errors }}
                            {{ field|as_crispy_field }}
                            {% if field.help_text %}
                            <p class="help">{{ field.help_text|safe }}</p>
                            {% endif %}                            
                        </div>
                    {% endif %}
                {% endfor %} 
            </div>                    
            {% endfor %}
        <div class="input-group-append">
                    <button class="btn btn-success add-form-row">+</button>
            </div> 

Answer 1

You are making a copy of the HTML objects, but these do not have the same event handlers as the original object. To remedy this, I would suggest making a function that will reset the event handlers for the cloned elements.

This could be done something like this:

function resetCalendarClickHandler(){
    $(".input-group-addon").unbind("click") //remove current event handlers to prevent duplication when adding new one
    $(".input-group-addon").click(<yourEventHandler>);
}

Once you have this, you can add a call to this function at the end of your cloneMore() function and this will re-assign the event handlers and include the cloned element as it will be part of your HTML at this point.