jquery not working after dynamic add table row

Question

I have the following codes which makes an select list to auto populate from a table and another which auto populate from another table (both in the same db) without using a submit button. All works ok but there is also a button that if clicked will make another table row with the same select fields.

The questions are: - what is wrong in the code because when i click on add another row button, it displays another row but only the first select is operational. i need both select to be operational; - what to use instead of the first javascript code for the cloning of the row but keep full functionality Here are the codes:

Javascript for new row

<script>
  function addField(n) {
    var tr = n.parentNode.parentNode.cloneNode(true);
    document.getElementById('tbl').appendChild(tr);
  } 
</script> 

script querying

<script>
  $(document).ready(function() {

    $("#id_produs").change(function() {
      var id_produs = $(this).val();

      $.ajax({
        url: 'query.php',
        type: 'post',
        data: {
          id_produs: id_produs
        },
        dataType: 'json',
        success: function(response) {

          var len = response.length;

          $("#cod_produs").empty();
          for (var i = 0; i < len; i++) {
            var id_produs = response[i]['id_produs'];
            var cod_produs = response[i]['cod_produs'];

            $("#cod_produs").append("<option value='" + id_produs + "'>" + cod_produs + "</option>");

          }
        }
      });
    });

  }); 
</script>

PHP & HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl">
  <tr>
    <td>Produse</td>
    <td>Cod Produs</td>
    <td>Cantitate</td>
    <td></td>
  </tr>
  <tr>
    <td>
      <select id="id_produs">
        <option value="0">- Select -</option>
        <?php
                    if ($rezultatproduse->num_rows > 0) {
                        while($rowproduse = $rezultatproduse->fetch_assoc()) {
                    ?>
          <option value="<?php echo $rowproduse[" id_denumire "]; ?>">
            <?php echo $rowproduse["denumire"]; ?>
          </option>
          <?php
                        }
                    }
                    ?>
      </select>
    </td>
    <td>
      <select id="cod_produs">
        <option value="0">- Select -</option>
      </select>
    </td>
    <td>
      <input type="text" name="cantitate" />
    </td>
    <td><input type="submit" class="button" value="Add another line" onclick="addField(this);" /></td>
  </tr>
</table>

and also query.php

<?php
include "conn.php";
$id_produs = $_POST['id_produs']; 
$sql = "SELECT id_produs, cod_produs FROM coduri_produse WHERE id_produs = ".$id_produs;
$result = mysqli_query($conn,$sql);
$coduri_arr = array();
while( $row = mysqli_fetch_array($result) ){
    $id_produs = $row['id_produs'];
    $cod_produs = $row['cod_produs'];
    $coduri_arr[] = array("id_produs" => $id_produs, "cod_produs" => $cod_produs);
}
// encoding array to json format
echo json_encode($coduri_arr);
?>

Answer 1

Change this

$("#id_produs").change(function() {

to this

$(document).on('change', "#id_produs", function() {

If you want an event to work on dynamically added elements you need to bind it to document and not to elements. Because jQuery bunds an event only to elements which are currently in DOM.

$(document).on('change', "#id_produs", function() {
  var id_produs = $(this).val();

  $.ajax({
    url: 'query.php',
    type: 'post',
    data: {
      id_produs: id_produs
    },
    dataType: 'json',
    success: function(response) {

      var len = response.length;

      $("#cod_produs").empty();
      for (var i = 0; i < len; i++) {
        var id_produs = response[i]['id_produs'];
        var cod_produs = response[i]['cod_produs'];

        $("#cod_produs").append("<option value='" + id_produs + "'>" + cod_produs + "</option>");

      }
    }
  });
});

function addField(n) {
  var tr = n.parentNode.parentNode.cloneNode(true);
  document.getElementById('tbl').appendChild(tr);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl">
  <tr>
    <td>Produse</td>
    <td>Cod Produs</td>
    <td>Cantitate</td>
    <td></td>
  </tr>
  <tr>
    <td>
      <select id="id_produs">
        <option value="0">- Select -</option>
        <option value="test_value">
          test value
        </option>
      </select>
    </td>
    <td>
      <select id="cod_produs">
        <option value="0">- Select -</option>
      </select>
    </td>
    <td>
      <input type="text" name="cantitate" />
    </td>
    <td><input type="submit" class="button" value="Add another line" onclick="addField(this);" /></td>
  </tr>
</table>

EDIT

Also you should avoid adding elements with the same id.

That is the reason why wrong select is activated. Change id to class and of course in jQuery change id to class.

The same goes for this $("#cod_produs"). Make sure that you get the exzact element. Because right now it will work for all elements with id="cod_produs".

So change to something like this (example):
Instead of this

$("#cod_produs").empty();

do

$(this).closest(".cod_produs").empty();