How to create multiple change function.

How to create multiple change function.

I have an html select and a add button. If any one click on add button then an html select create same class, name. My problem is if I change first html select then change function work properly but if I change created html select then change function don’t work. Please can someone point out what I may be doing wrong here? Many thanks. Here is my code:  


  1. <html>
  2. <head>
  3. <title>the title</title>
  4.  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  5.    <script type="text/javascript" language="javascript">
  6.   $(document).ready(function() {
  7.       $(".name").change(function(){
  8.           $.post(
  9.              "data.php",
  10.              $(".name").serialize(),
  11.                  function(data) {
  12.                 $('#stage1').html(data);
  13.              }
  14.           );
  15.       });
  16.    });
  17.    </script>
  18. <script type="text/javascript" language='javascript'>
  19. /*
  20. This script is identical to the above JavaScript function.
  21. */
  22. var ct = 1;
  23. function new_link()
  24. {
  25.     ct++;
  26.     var div1 = document.createElement('div');
  27.     div1.id = ct;
  28.     // link to delete extended form elements
  29.     var delLink = '<div style="text-align:right;margin-top:-20px"><a href="javascript:delIt('+ ct +')">Delete</a></div>';
  30.     div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink;
  31.     document.getElementById('newlink').appendChild(div1);
  32. }
  33. // function to delete the newly added set of elements
  34. function delIt(eleId)
  35. {
  36.     d = document;
  37.     var ele = d.getElementById(eleId);
  38.     var parentEle = d.getElementById('newlink');
  39.     parentEle.removeChild(ele);
  40. }
  41. </script>
  42. </head>
  43. <body>
  44.    <div id="stage1" style="background-color:blue; color: white">
  45.           STAGE - 1
  46.    </div>
  47. <form id="testform">
  48. <div id="newlink">
  49.  <table>
  50.  <tr>
  51.  <td><p>Fruit:</p></td>
  52.  <td>
  53.      <select class="name" name="name[]">
  54.          <option>Apple</option>
  55.          <option>Mango</option>
  56.          <option>Orange</option>
  57.          <option>Banana</option>
  58.      </select>
  59.  </td>
  60. </tr>
  61. </table>
  62. </div>
  63.     <input type="button" value="Add" onclick="javascript:new_link()"/>
  64. </form>
  65.     <div id="newlinktpl" style="display:none">
  66.         <table>
  67.         <tr>
  68.  <td><p>Fruit:</p></td>
  69.  <td>
  70.      <select class="name" name="name[]">
  71.          <option>Apple</option>
  72.          <option>Mango</option>
  73.          <option>Orange</option>
  74.          <option>Banana</option>
  75.      </select>
  76.  </td>
  77. </tr>
  78.         </table>
  79.     </div>
  80. </body>
  81. </html>

php code:

  1. <?php
  2. $fruit=$_REQUEST["name"];
  3. $n = count($fruit);
  4. for($i=0;$i<$n; $i++)
  5. {
  6.     echo $fruit[$i]."<br/>";
  7. }
  8. ?>