Add Rows with Remove button
<p>Hi I would like to add rows dynamically.</p>

<p>Initially no rows exist. When I click on Add New link</p>

<p>the first row should appear with 4 textboxes and a remove link.</p>

<p>Now upon clicking Add New it should clone the existing row.</p>

<p>This is my code:</p>

<pre><code>&lt;tr&gt;
                        &lt;td &gt;&lt;a href="#" id="addnew"&gt;Add New&lt;/a&gt;&lt;/td&gt;
                    &lt;/tr&gt;
            &lt;tr&gt;&lt;td colspan=4&gt;
            &lt;table border=1 id="mytable" class="dataGridAuto"&gt;

            &lt;tr class='deleterow'&gt;

            &lt;td&gt;
                            &lt;?php echo CHtml::activeHiddenField($meta,'[]id');?&gt;    
                    &lt;/td&gt;
                    &lt;td&gt;
                            &lt;?php
                            $criteria = new CDbCriteria;
                            $criteria-&gt;order = 'ScriptArgumentClassType'; //or whatever field
                            echo CHtml::activeDropDownList($meta,'[]ScriptArgumentClass_id',CHtml::listData(AutoScriptArgumentClass::model()-&gt;findAll($criteria),'id','ScriptArgumentClassType'), array('prompt'=&gt;'Please select Argument class type'));
                            ?&gt;  
                    &lt;/td&gt;
                    &lt;td&gt;
                            &lt;?php
                            $criteria = new CDbCriteria;
                            $criteria-&gt;order = 'TnType'; //or whatever field
                            echo CHtml::activeDropDownList($meta,'[]Type_id',CHtml::listData(AutoTnType::model()-&gt;findAll($criteria),'id','TnType'), array('prompt'=&gt;'Please select TN type'));
                            ?&gt;
                    &lt;/td&gt;

                    &lt;td&gt;
                            &lt;?php
                            $criteria = new CDbCriteria;
                            $criteria-&gt;order = 'service'; //or whatever field
                            echo CHtml::activeDropDownList($meta,'[]Service_id',CHtml::listData(Service::model()-&gt;findAll($criteria),'id','service'), array('prompt'=&gt;'Please select Service'));
                            ?&gt;
                    &lt;/td&gt;

                    &lt;td&gt;
                            &lt;?php
                            $criteria = new CDbCriteria;
                            $criteria-&gt;order = 'Manufacture'; //or whatever field
                            echo CHtml::activeDropDownList($meta,'[]Cpe_id',CHtml::listData(AutoCPE::model()-&gt;findAll($criteria),'id','Manufacture'), array('prompt'=&gt;'Please select CPE'));
                            ?&gt;
                    &lt;/td&gt;


                &lt;/tr&gt;

                &lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;
</code></pre>

<p>This is the Jquery code</p>

<pre><code>$(function(){
    // start a counter for new row IDs
    // by setting it to the number
    // of existing rows

   $('#remove').click(function(){
        $('#deleterow').remove();
        return false;        
      });
    // bind a click event to the "Add" link
    $('#addnew').click(function(){
      // increment the counter


      // get the entire "Add" row --
      // "this" refers to the clicked element
      // and "parent" moves the selection up
      // to the parent node in the DOM
     // var addRow = $(this).parent().parent();
      var addRow = $('#mytable tr:last');
      // copy the entire row from the DOM
      // with "clone"
      var newRow = addRow.clone();

      // set the values of the inputs
      // in the "Add" row to empty strings
      $('select', addRow).val('');
      $('input', addRow).val('');



      // insert a remove link in the last cell
     // $('td:last-child', newRow).html('&lt;a href="" class="remove"&gt;Remove&lt;/a&gt;');
      $('td:last-child', newRow).after('&lt;td&gt;&lt;a href="" class="remove"&gt;Remove&lt;/a&gt;&lt;/td&gt;');



      // insert the new row into the table
      // "before" the Add row
      addRow.before(newRow);

      // add the remove function to the new row
      $('a.remove', newRow).click(function(){
        $(this).parent().parent().remove();
        return false;        
      });

      // prevent the default click
      return false;
    });
  });
</code></pre>

<p>What this code does is it shows the first row on document ready and upon clicking Add New it clones the existing row and adds a remove link for the previous row.</p>

<p>What I need is I do not want the first row on document ready. I just want to add rows when clicked on Add New link along with remove link at the end.</p>

<p>Let me know if this isn't clear </p>
