title: Adding and removing textboxes using jquery
body: <p>My requirement is to add two side by side text box Once user click on add hyperlink.After that for that row add link should disappear.
  Also clicking on remove must remove only those two textbox which are in the same tr.My code is like this.Its no way complete.But I need suggestions
  regarding the implementation.</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:4px;
   }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
  
      var counter = 2;
  
      $(".addButton").live("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 id="'+counter+'"&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").live("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>