<script>
$(document).ready(function(){
   $(".add-answer").click(function(){ //bind a click event
       addAnswer($(this));
   });
});

function addAnswer($anchor){
  var questionId = $anchor.siblings("textarea").attr("id");
  var answerIndex = $anchor.siblings(":text").size() + 1;
  var answerId = questionId + "-answer" + answerIndex;
  var $lastAnswer = $anchor.siblings(":text:last");
  $lastAnswer.clone().attr("id", answerId).attr("name", answerId).after($lastAnswer);
}

function addQuestion(){
  var currentQuestion = $(".questionContainer").size(); //Number of questionContainers
  var $newElement = $('#questionContainer0').clone().attr('id','questionContainer'+currentQuestion);
  $newElement.children('#question0'). attr('id','question'+currentQuestion).attr('name','question'+currentQuestion);
  //Update the answerContainer div id.
  $newElement.children('#answerContainer0') .attr('id','answerContainer'+currentQuestion);
  //Update the first answer id and name
  var answerId = 'question'+currentQuestion+'-answer1';
  $newElement.children('#question0-answer1').attr('id',answerId).attr('name',answerId);
  $newElement.appendTo('#questionArea');
}
  </script>
  </head>

  <form method="post" action="test.cfm">
  <div id="questionArea">
    <div id="questionContainer0" class="questionContainer">
        <textarea id="question0" name="question0"></textarea>
        <div id="answerContainer0">
        <input type="text" id="question0-answer1" name="question0-answer1" />
        <p><a href="javascript:" class="add-answer">Add Answer</a></p>
    </div>


    </div>

  </div>

  <input type="submit" value="go" name="submit">
  </form>
  <a href="#" onClick="addQuestion();" id="addQuestion" title="Add a question" class="link-sm" style="background-color:red;">Add Question</a>