JQuery add button inside
<p>I want to have the below:
 Have a text box(Label Survey Qs), a button(Add Choice), radiobox+ text
 Buttons(Add Button) at the bottom.
When I click on Add Button, new div is getting created (Like Survey2).
When I click on Add Choice(1st one), the new radio+text box is created.</p>

<p><strong>However when I click on Add Choice(second one), the radio+text box is not created</strong>. The reason is probably the handlers are not associated when we create new objects. But I am  not able to put the live() method to the code to do so.</p>

<p>I am a novice. Please help. Thanks in advance.</p>

<p>Please find my code:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;jQuery add / remove textbox example&lt;/title&gt;

&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;

&lt;style type="text/css"&gt;
    div{
        padding:8px;
    }
&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;h1&gt;jQuery add / remove textbox example&lt;/h1&gt;

&lt;script type="text/javascript"&gt;

$(document).ready(function(){

    var counter = 2;
    var choiceCounter=2;

    $("#addButton").click(function () {
    //$("#addButton").live("click",function () {
    //alert("Inside Click FUnction");
    choiceCounter=0;
    if(counter&gt;10){
            alert("Only 10 textboxes allow");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after('&lt;label&gt;Survey Question '+ counter + ' : &lt;/label&gt;' + '&lt;input type="text" name="textbox' + counter +  '" id="textbox' + counter + '" value="" &gt;');

    newTextBoxDiv.append('&lt;label&gt;Survey Question ' + counter + ' : &lt;/label&gt;' + '&lt;input type="text" name="textbox'  + counter + '" id="textbox' + counter + '" value="" /&gt; &lt;input type="button" value="Add Choice" id="addOption"&gt; &lt;/br&gt;&lt;input type="radio"&gt; &lt;input type="textbox" id="option1" &gt;&lt;/br&gt;');           
  $('#TextBoxesGroup').append(newTextBoxDiv);  


    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
     });


     $("#addOption").click(function () {   // the new Add Method
    alert("Inside Option Function");
    if(choiceCounter&gt;10){
            alert("Only 10 textboxes allow");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + choiceCounter);

    newTextBoxDiv.after( '&lt;br&gt;&lt;input type="radio"&gt; &lt;input type="text" name="textbox' + choiceCounter + '" id="option' + choiceCounter + '" value="Insert your choice" &gt;');


    newTextBoxDiv.append( '&lt;br&gt;&lt;input type="radio"&gt; &lt;input type="text" name="textbox' + choiceCounter + '" id="option' + choiceCounter + '" value="Insert your choice" /&gt;');           
        $('#TextBoxesGroup').append(newTextBoxDiv);  

    newTextBoxDiv.appendTo("#TextBoxesGroup");

    choiceCounter++;
     });





     $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

        $("#TextBoxDiv" + counter).remove();

     });

     $("#getButtonValue").click(function () {

    var msg = '';
    for(i=1; i&lt;counter; i++){
      msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
     });
  });
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;

&lt;div id='TextBoxesGroup'&gt;
    &lt;div id="TextBoxDiv1"&gt;

        &lt;label&gt;Survey Question 1: &lt;/label&gt;&lt;input type='textbox' id='textbox1' &gt;  &lt;input type="button" value='Add Choice' id="addOption"&gt;
        &lt;br&gt;&lt;input type="radio"&gt; &lt;input type='textbox' id='option1' &gt;&lt;br&gt;   

    &lt;/div&gt;
&lt;/div&gt;
&lt;input type='button' value='Add Button' id='addButton'&gt;
&lt;input type='button' value='Remove Button' id='removeButton'&gt;
&lt;input type='button' value='Get TextBox Value' id='getButtonValue'&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
