title: Dynamically add textbox using jquery
body: <p>What's wrong with this code ? Only first add and remove link is working...</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="jquery-1.3.2.min.js"&gt;&lt;/script&gt;
  
  &lt;style type="text/css"&gt;
   div{
    padding:8px;
   }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
  
      var counter = 2;
  
      $(".addButton").click(function () {
  
   if(counter&gt;5){
              alert("Only 5 textboxes allow");
              return false;
   }   
  
   var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'TextBoxDiv' + counter);
  
   newTextBoxDiv.html('&lt;TABLE&gt;&lt;TR&gt;&lt;TD&gt;' +
  '&lt;input type="text" name="textbox' + counter + 
  '" id="textbox' + counter + '" value="" &gt;&lt;/TD&gt;&lt;TD&gt;&lt;input type="text" name="textbox' + counter + 
  '" id="textbox' + counter + '" value="" &gt;&lt;/TD&gt;&amp;nbsp;&lt;TD&gt;&lt;a href="#" value="addButton" class="addButton"&gt;Add&lt;/a&gt;&amp;nbsp;&lt;a href="#" value="removeButton" class="removeButton"&gt;Remove&lt;/a&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TABLE&gt;');
  
   newTextBoxDiv.appendTo("#TextBoxesGroup");
  
  
   counter++;
       });
  
       $(".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;TR&gt;&lt;TD&gt;&lt;input type='textbox' id='textbox1' &gt;&lt;/TD&gt;&amp;nbsp;&lt;TD&gt;&lt;input type="text" name="textbox' + counter + 
  '" id="textbox' + counter + '" value="" &gt;&lt;/TD&gt;&amp;nbsp;&lt;TD&gt;&lt;a href="#" value="addButton" class="addButton"&gt;Add&lt;/a&gt;&amp;nbsp;&lt;a href="#" value="removeButton" class="removeButton"&gt;Remove&lt;/a&gt;&lt;/TD&gt;&lt;/TR&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>