Question

I have a fiddle

here is my JS:

$(document).ready(function() {

    window.qNum = 0;
    window.$oClone = $('#pq0').clone();      

    addForm();
});


$('.addForm').live('click', function addForm() {   
    var $clone = $oClone.clone().attr('id', 'pq' + qNum + 1);
    // insert the new element after the last "duplicatable" input field
    $('#pq' + qNum).after($clone);
});

I am trying to increment my variable ‘qNum’ a the end of my function ‘addForm’.
This will increment the ID so i can find contents easier later in my project.

I am trying to add a ++qNum; at the end of the function but it is breaking the script, it won’t run if i add it.

Here is my test that won’t work with the changes.

Answer 1

var qNum = 0;

$(document).ready(function() {

    window.$oClone = $('#pq0').clone();      

    addForm();
});


$('.addForm').live('click', addForm);

function addForm() {
    var appendTo = $('#pq' + qNum);
    qNum += 1;

    var $clone = $oClone.clone().attr('id', 'pq' + qNum);
    // insert the new element after the last "duplicatable" input field
    appendTo.after($clone);
}​

Declare your qNum outside the document ready call. Then ++ increment it to properly keep track. Also, move addForm outside the click listener and call it like so. Hope it helps.

Copy paste this into your fiddle. it will work.