title: Get selected value from dynamic dropdown in table
body: <p>I have a button that adds a row to a table so that data can be inserted. One of the <code>&lt;td&gt;</code> tags populates a dropdown menu. I need to get the value from that dropdown to post in an ajax call back to a php page to insert the data in the database. Everything I've tried has returned undefined for <code>position_ID</code>. </p>
  
  <p>I'm getting a 500 Error on the POST and I think it's due to <code>var position_ID = $(this).parents('tr').find('.positionList').val();</code>, in the Insert function, not being set.</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
        &lt;script src='jquery-3.4.1.js' type='text/javascript'&gt;&lt;/script&gt;
        &lt;script src='script.js' type='text/javascript'&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;button type="button" name="add" id="add"&gt;Add&lt;/button&gt;
          &lt;table id="dataTable"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Last Name&lt;/th&gt;
                  &lt;th&gt;First Name&lt;/th&gt;
                  &lt;th&gt;Location Number&lt;/th&gt;
                  &lt;th&gt;Position&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>PHP Code:</p>
  
  <pre><code>&lt;?PHP&gt;
      $sql = "SELECT positionID, name FROM position";
  
      $result = mysqli_query($db,$sql);
  
      $position_arr = array();
  
      while( $row = mysqli_fetch_array($result) ){
          $positionID = $row['positionID'];
          $name = $row['name'];
  
          $position_arr[] = array("positionID" =&gt; $positionID, "name" =&gt; $name);
      }
  
      // encoding array to json format
  
      $JSON_array = json_encode($position_arr);
      echo $JSON_array;
  ?&gt;
  &lt;?PHP&gt;
      if(isset($_POST["last_name"], $_POST["first_name"], $_POST["location_num"], $_POST["position_ID"]))
      {
           $lastName = mysqli_real_escape_string($db, $_POST["last_name"]);
           $firstName = mysqli_real_escape_string($db, $_POST["first_name"]);      
           $locationNum = mysqli_real_escape_string($db, $_POST["location_num"]);
           $positionID = mysqli_real_escape_string($db, $_POST["position_ID"]);
  
           $sqlInsertEmployee = "INSERT INTO employee(lastName, firstName, positionID, locationID) SELECT ?, ?, positionID, locationID from location join position p on p.positionID = ? where number = ?";
           $stmtInsertEmployee = mysqli_prepare($db,$sqlInsertEmployee);
           mysqli_stmt_bind_param($stmtInsertEmployee, "ssss", $lastName,$firstName,$positionID,$locationNum,);
           mysqli_stmt_execute($stmtInsertEmployee);
           mysqli_stmt_close($stmtInsertEmployee);
      }   
  ?&gt;
  </code></pre>
  
  <p>Script code:</p>
  
  <pre><code>$('#add').click(function(){
         var html = '&lt;tr&gt;';
         html += '&lt;td contenteditable id="lastName"&gt;&lt;/td&gt;';
         html += '&lt;td contenteditable id="firstName"&gt;&lt;/td&gt;';
         html += '&lt;td contenteditable id="locationNum"&gt;&lt;/td&gt;';
         html += '&lt;td contenteditable id="positionID"&gt;&lt;select class="positionList"&gt;&lt;option&gt;&lt;/option&gt;&lt;/select&gt;';   
  
         $(document).ready(function() {
                var data
                $.ajax({
                  dataType: 'json',
                  url: 'get-position.php',
                  data: data,
                  success: function(data) {
                      // begin accessing JSON data here
                    console.log(data)
                    //data = jQuery.parseJSON(data);
                    var html_to_append = '';
                    html_to_append += '&lt;option value="0"&gt;-- Select One --&lt;/option&gt;'
                    $.each(data, function(i, item) {
                      html_to_append += '&lt;option value="' + item.positionID + '"&gt;' + item.name + '&lt;/option&gt;';
                    });
                    $(".positionList").html(html_to_append);
                  },
                })
              })
  
  
         html += '&lt;/td&gt;&lt;td&gt;&lt;button type="button" name="insert" id="insert"&gt;Insert&lt;/button&gt;&lt;/td&gt;';
         html += '&lt;/tr&gt;';
         $('#dataTable tr:first').after(html);
      });
  
  
  
  
      $(document).on('click', '#insert', function(){
         var last_name = $('#lastName').text();
         var first_name = $('#firstName').text();    
         var location_num = $('#locationNum').text();
  
         var position_ID = $(this).parents('tr').find('.positionList').val();
  
         console.log(position_ID);
  
         if(first_name != '' &amp;&amp; last_name != '' &amp;&amp; location_num != '')
         {
          $.ajax({
           url:"insert.php",
           method:"POST",
           data:{last_name:last_name, first_name:first_name, location_num:location_num, position_ID:position_ID},
           success:function(data)
           {
            $('#alert_message').html('&lt;div class="alert alert-success"&gt;'+data+'&lt;/div&gt;');
            $('#dataTable').DataTable().destroy();
            fetch_data();
  
           }
          });
          setInterval(function(){
           $('#alert_message').html('');
          }, 5000);
         }
         else
         {
          alert("All Fields is required");
         }
       });
  </code></pre>