title: Using jQuery click function to get value from dynamic select created with PHP
body: <p>I have a PHP that generate a select box for each field of a table. The field name is payment_status. 
  The PHP will pull up the value of the field from the table and attribute it to the initial value of this select then two static values are given in the select, paid and not paid, so the user may change the payment status at any time, then pressing a generated button called change_status a jquery function will get the payment_status selected value and the hidden input code_trip and send them to PHP file to update the fields in the table. See below the PHP generating the HTML select input:</p>
  
  <pre><code>$output.='&lt;tr&gt;';
  $output.='&lt;input type="hidden" name="code_trip" id="code_trip" value="'.$code_trip.'"&gt;';
  $output.='&lt;td&gt;&lt;b&gt;&lt;a href="open_book.php?code_trip='.$code_trip.'"&gt;'.$code_trip.'&lt;/a&gt;&lt;/b&gt;&lt;/td&gt;';
  $output.='&lt;td&gt;'.$lastname.', '.$firstname.'&lt;/td&gt;';
  $output.='&lt;td&gt;('.$qty_traveling.') passenger(s)&lt;/td&gt;';
  $output.='&lt;td class="status"&gt;Status: &lt;b&gt;&lt;select name="payment_status" id="payment_status"&gt;
              &lt;option value="'.$payment_status.'" selected="selected"&gt;'.$payment_status.'&lt;/option&gt;
              &lt;option value="paid"&gt;paid&lt;/option&gt;
              &lt;option value="not paid"&gt;not paid&lt;/option&gt;
          &lt;/select&gt;
          &lt;/b&gt;&lt;input type="button" name="change_status" id="change_status" value="Save"&gt;&lt;/td&gt;';
  $output.='&lt;/tr'&gt;;
  </code></pre>
  
  <p>Now I have jQuery function that isn't working by the way, that is supposed to get the values</p>
  
  <pre><code>$(document).ready(function(){
    $('.status').on('click', '#change_status', function(){    
      var code_trip = $("#code_trip").val();  
      var new_pay_status = $("#payment_status").val();    
      alert(new_pay_status+" selected for trip: "+code_trip); 
      $.ajax({
        type: "POST",
        url: "save_payment_status.php",
        data: { search_id1: code_trip, search_id2: new_pay_status },
        cache: false,
        success: function(html){
          alert("Payment status has been changed to "+html);
        }
      });     
    });   
  });
  </code></pre>
  
  <p>When I click the button change_status, jquery get the value only of the first dynamic select field, payment_status and as well the value of the first dynamic code_trip no matter if I click in the button of another generated fields.</p>