ajax post not working php mysql

Question

I have a table in which i can add rows using javascript. I have a select box in each row. I am calling onchange for select box. It works only for first row,not working for the rows added through javascript. Please help.

This is the html table with add and delete row button:

<INPUT type="button" class="btn btn-primary" value="Add Row" onclick="addRow('payment_table')" />
<INPUT class="btn btn-primary" type="button" value="Delete Row" onclick="deleteRow('payment_table')" />

<TABLE  class="table table-hover dataTable table-striped width-full" data-plugin="dataTable" id="payment_table">
    <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD>
            <SELECT name="product" class="form-control product" id="product" >
                <option value="">Select Product</option>
                <?php
                $sql="select products_name,products_amount,products_tmp_id from slv_products where products_status <> '0'";
                $results = $connect->runQuery($sql);
                foreach($results as $result) {
                ?>
                <option value="<?php echo $result['products_tmp_id']; ?>"><?php echo $result['products_name']; ?></option>
                <?php } ?>
            </SELECT>
        </TD>
        <TD><input class="form-control col-sm-2" type="text" name="quantity" id="quantity" placeholder="Quantity"></TD>
        <TD><input class="form-control" type="text" name="amount" id="amount" placeholder="Amount" readonly></TD>
    </TR>

</TABLE>

This is the script to add and delete row and ajax :

    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
            }
        }
    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }
    }

   $(document).ready(function() {

  $('.product').change(function() {    
var id = $(this).val();

$.ajax({
    type: "POST",
    url: "ajax.php",
    data: {
        id : id
    },
    success: function(data) {
     if(data){

   $("#amount").val(data);
    $("#quantity").val("1");   
    } 
    },
     error : function(data){
  alert("Error occured !!");
  }
});    
}); 

  });

This is ajax.php :

<?php
include('/opt/lampp/htdocs/slv/includes/config.php');
$id = $_POST['id'];
$query = "SELECT products_amount FROM slv_products WHERE products_tmp_id='$id'"; //expecting one row
$results = $connect->runQuery($query);
foreach($results as $result){
    echo $result['products_amount'];
}
?>

Answer 1

Your ajax code should be like this:

    $('body').on('change', '.product', function() { 
      var _that = $(this);   
      var id = _that.val();

      $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
           id : id
        },
        success: function(data) {
          if(data){
            _that.parents("tr").find(".amount").val(data);
            _that.parents("tr").find(".quantity").val("1");   
          } 
       },
       error : function(data){
         alert("Error occured !!");
       }
     });    
   }); 

It's because of binding of html element. If html is added dynamic then you can't bind it with jQuery directly.