title: Appending Row to PHP generated table row using Jquery
body: <p>Using Jquery I am supposed to get id generated by php foreach loop and create a new row with input text where each value will be filled up by jquery. In short it is like inline editing. The difference is that instead of inline, I append new row for inline editing. And please see what I have progressed so far and help me get it working.</p>
  
  <p>The PHP Part mysale.php:</p>
  
  <pre><code>&lt;table&gt;
     &lt;tr&gt;
        &lt;th&gt;id&lt;/th&gt;
        &lt;th&gt;name&lt;/th&gt;
        &lt;th&gt;receipt&lt;/th&gt;
        &lt;th&gt;month&lt;/th&gt;
      &lt;/tr&gt;&lt;form action="" method="POST" id="saleEdi"&gt;
  &lt;?php
        foreach($sales as sale):
            echo '&lt;tr&gt;';
            echo "&lt;td class='editSale'&gt;{$sale['id']}&lt;/td&gt;";//click here
            echo "&lt;td class='sName'&gt;{$sale['name']}&lt;/td&gt;";
            echo "&lt;td&gt;{$sale['receipt']}&lt;/td&gt;";
            echo "&lt;td&gt;{$sale['month']}&lt;/td&gt;";
            echo '&lt;/tr&gt;';
         endforeach;
  ?&gt;
  </code></pre>
  
  <p>
      </p>
  
  <p>The Jquery Part</p>
  
  <pre><code>$(document).on("click",".editSale",function(){
  var sale = $('.editSale').text();
  var name = $('.editName').text(); 
  var i=$('table tr').length;
      html += '&lt;td&gt;&lt;input type="text" name="saleid" value="'+$('.editSale').text(sale)+i+'"&gt;&lt;/td&gt;';
      html += '&lt;td&gt;&lt;input type="text" name="name" value="'+$('.editName').text(name)+i+'"&gt;&lt;/td&gt;';
    //and so on
      $('table').append(html);
      i++;
  });
  </code></pre>
  
  <p>The problem is that I could not get it working. I want to append new row with data in the input value below the php generated row whenever I click on each id or each row itself. </p>