title: Getting values from cells of a HTML dynamic table created with Jquery
body: <p>I have created a table that grows dynamically when the user enter some values using input and select fields. This is done by the append from jquery. This is the table id="customFields":</p>
  
  <pre><code>===============================================
  |  ID   |  CLASS  |  PRICE  |  QTY  |  DELETE |
  ===============================================
  </code></pre>
  
  <p>This is the jQuery script that I use to append lines and add information to the table:</p>
  
  <pre><code>var index = 0;
  $("#addPRICE").click(function(){
      index++;
      var id_value = $("#pack_price").val();
      var price_qty= $("#price_qty").val();
  
      //alert(id_value);
      $.ajax({
          type:"POST",
          url:"get_mt_pricelist.php",
          data:{mt_id: id_value},
          dataType:"json",
          success: function(data){
              if(data.success=="true"){
                 $("#customFields").append('&lt;tr id="'+index+'" valign="top"&gt;&lt;td align="center"&gt;&lt;input type="text" class="code1" id="customID" name="customID[]" value="'+id_value+'" size="3" readonly="readonly"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="code2" id="customCLASSE" name="customCLASSE[]" value="'+data.multi_classe+'" readonly="readonly"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="code3" id="customPRICE" name="customPRICE[]" value="'+data.multi_price+'" readonly="readonly"/&gt;&lt;/td&gt;&lt;td align="center"&gt;&lt;input type="text" class="code4" id="customQTY" name="customQTY[]" value="'+price_qty+'"/&gt;&lt;/td&gt;&lt;td valign="middle" align="center"&gt;&lt;a href="javascript:void(0);" class="remCF"&gt;Delete&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;');
       });
  });
  </code></pre>
  
  <p>Everything is working fine, the fields are added normally. I get some values from a MySQL database using the ajax and everything. I created a DELETE class called remCF, so when the user clicks on it the actual row will be removed.
  Also I have an index that gives to each  an id number.
  I would like to catch the value in the cells PRICE and QTY and pop them in a alert msg when the user click on DELETE, then proceed with the remove().</p>
  
  <p>This is what I did:</p>
  
  <pre><code>$("#customFields").on('click','.remCF',function(){
       alert($(".code3").val());
       alert($(".code4").val());
       $(this).parent().parent().remove();
  }); 
  </code></pre>
  
  <p>The problem is: The alert shows only the value of the first row for any DELETE that I press. Even using CLASS instead of ID.
  How can I get the right value for the DELETE row that I am clicking?</p>
  
  <p>Thanks</p>