Question

I’m working on this form (test) creator where a div containing form elements is cloned using jQuery to create more questions. The original div is hidden. each div also has a button within it that has onClick="javascript:$(this).parent().empty().remove();" attached. My problem is the divs are numbered question1, question 2 etc by checking how many divs with the class question exists and then appending that number to ‘question’ and setting question1(or question2, question3 etc) as the id for the cloned div- Since the original div is hidden there is no need to +1 to the number of divs with that class. But when one if the divs is deleted the numbering gets messed up. Example:
1. Div is added.
2. Div is called Question 1(id=question1)
3. Another div is added.
4. Div is called Question 2(id=question2)
5.First Div is removed.
6.Another div is added.
7.New div is called Question 2(id=question2)
8.Question 2(id=question2) already exists since the second div was not deleted.
I need to renumber the divs when one of them is deleted.
Here’s the code for cloning the divs:

function copyAppendQ() {
  question = document.getElementById("question");
  clone=question.cloneNode(true);
  numberOfQuestions = $('.question').length;
  id = "questioncon"+(numberOfQuestions);
  clone.id=id;
  question.parentNode.appendChild(clone);
  inid= "question"+(numberOfQuestions);
  optionid= "optionsdiv"+(numberOfQuestions);
  $('#'+id+' '+'.'+'questionin').attr('id', inid);
  $('#'+id+' '+'.'+'options').attr('id', optionid);
 $('#' + id + ' h2').html( 'Question ' + numberOfQuestions );
}

and the div (this div is hidden but is cloned with a different id, removing the display:none property set on the original div, when the above function is called)

<div id="question" class="question">
                <h2></h2>
                <input id="questionin" class="questionin" style="width:341px;" ><input type="button" id="remq" onClick="javascript:$(this).parent().empty().remove();" style="background-color:#E12E1E;border:0;width:120px;color:#fff;" value="Remove Question">
                <h3>Options</h3>
                <div class="options">
                <label>a.</label><input class="option optiona"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="a" name="answer">&nbsp;
                <label>b.</label><input class="option optionb"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="b" name="answer">
                <div class="clear"></div>
                <label>c.</label><input class="option optionc"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="c" name="answer">&nbsp;
                <label>d.</label><input class="option optiond"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="d" name="answer">
                </div>  
                </div>  

This can be seen live here:http://bit.ly/R8hB2m

Answer 1

Start your copyAppendQ function with:

copyAppendQ.id = (copyAppendQ.id || 0)+1;

Then when assigning the ID:

id = "questioncon"+copyAppendQ.id;

This will ensure that you won’t get the same ID twice, even if questions are deleted.