Perform operations on a cloned form – Jquery ajax

I have created a form that contains two drop-down lists, when the user selects an item from the first list, the data for the second is automatically updated. I use jquery to do this and it works perfectly except that when I duplicate the form, the drop-down list N ° 1 of the duplicated form no longer updates the drop-down list N ° 2 so I would like to know how can I perform the same action on a cloned form (update a drop-down list by selecting one entered in another) and save the entries of all the cloned forms in a database.

Cordially!

here is the code i use

<form id="myForm">
 <div id="clonedSection1" class="clonedSection">    
  <select class="form-control" name="productName[]" id="productName" >
   <option value="0" selected>Selectionner le produit</option>
   <option value="copy">Copie</option>
   <option value="scan">Scan</option>
  </select>
  <select class="form-control" name="productPrice[]" id="quant" disabled>
   <option value="pu" selected>P.U</option>
  </select>
</div>
<div>
 <input type="button" id="btnAdd" value="add another name" />
 <input type="button" id="btnDel" value="remove name" />
</div>

<!-- script that allows you to modify the data in a drop-down list when an item is selected in another-->
<script type="text/javascript">
 $("#productName").change(function () {
  var val = $(this).val();
  if (val == "copy") {
  $("#quant").html("<option value='25'> 25$ </option>");
 } else if (val == "scan") {
  $("#quant").html("<option value='50'> 10$ </option>");
 }
});
</script>

<!-- script that clones the form-->
<script type="text/javascript">
 $(document).ready(function() {
 $("#btnAdd").click(function() {
  var num = $(".clonedSection").length;
  var newNum  = new Number(num + 1);

  var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
  newSection.children(":nth-child(5)").children(":first").attr("id", "productName" + newNum).attr("name", "productName[]" + newNum);
  newSection.children(":nth-child(6)").children(":first").attr("id", "quant" + newNum).attr("name", "productPrice[]" + newNum);

  $(".clonedSection").last().append(newSection)
  $("#btnDel").attr("disabled","");

  });
  $("#btnDel").click(function() {
  var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
        $("#clonedSection" + num).remove();     // remove the last element

        // enable the "add" button
        $("#btnAdd").attr("disabled","");

        // if only one element remains, disable the "remove" button
        if (num-1 == 1)
            $("#btnDel").attr("disabled","disabled");
    });

    $("#btnDel").attr("disabled","disabled");
  });
</script>