title: Adding new rows to table on clicking button in JQuery
body: <p>I am pretty new to jquery. I have the following code. Here I want to get new rows in the table by clicking the add button, but I can't get it.,</p>
  
  <p>can someone tell me what mistake I have done here?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var $ = jQuery.noConflict();
  $("#addrows").click(function () {
    if (document.getElementById("hiddenprice").value == "") {
      imagecounter = 4;
     } else {
     imagecounter = parseFloat(document.getElementById("hiddenprice").value) +1;
     }
    //imagecounter=4;     
    var newImageDiv = $(document.createElement('div'))
     .attr("id", 'add_div' + imagecounter);
    newImageDiv.after().html('&lt;table width="100%" cellpadding="0" 
    cellspacing="0" class="pdzn_tbl1" border="0"&gt;' +
    '&lt;tr&gt;&lt;td&gt;&lt;input type="text" name="rollno&lt;? $i ?&gt;"/&gt;&lt;/td&gt;' +
    '&lt;td&gt;&lt;input type="text" name="firstname&lt;? $i ?&gt;" /&gt;&lt;/td&gt;' +
    '&lt;td&gt;&lt;input type="text" name="lastname&lt;? $i ?&gt;" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;');
  
    newImageDiv.appendTo("#addgroup");
    $("tr:last").after(newImageDiv);
    document.getElementById("hiddenprice").value = imagecounter;
    imagecounter++;
  });
  &lt;/script&gt;
  &lt;div class="common" style="width:1040px; -overflow-x:scroll; padding: 5px 5px 0 5px;"&gt;
    &lt;table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" &gt;
    &lt;tr&gt;  
      &lt;th&gt;Roll No&lt;/th&gt;
      &lt;th&gt;First Name&lt;/th&gt;
      &lt;th&gt;Last Name&lt;/th&gt;
    &lt;/tr&gt;
    &lt;?php $t_row=3; for($i=1;$i&lt;=$t_row;$i++) {   ?&gt;
    &lt;tr id="rows"&gt;
      &lt;div&gt; 
        &lt;td&gt;&lt;input type="text" name="rollno&lt;? $i ?&gt;"/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="firstname&lt;? $i ?&gt;"/&gt;&lt;/td&gt;
        &lt;td&gt; &lt;input type="text" name="lastname&lt;? $i ?&gt;"/&gt;&lt;/td&gt;
      &lt;/div&gt;
    &lt;/tr&gt;
    &lt;? } ?&gt;
  
    &lt;div id="addgroup"&gt; 
      &lt;div id="add_div1"&gt; &lt;/div&gt;
    &lt;/div&gt; 
    &lt;table&gt;
      &lt;input type="button" name="add" value="+Add" id="addrows" /&gt;
      &lt;input type="hidden" id="hiddenprice" name="hiddenprice" value="3"/&gt; 
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Code Formatted &amp; Edit</strong>: Code alignments updated and removed unwanted style codes for better readability</p>