title: div inside select tag
body: <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="form-group"&gt;
  
      &lt;div class="col-xs-10"&gt;
        &lt;label for="class_code_reservation"&gt;Class Code&lt;/label&gt;
        &lt;select type="text" class="form-control" id="class_code_reservation" name="class_code_resevation" autocomplete="off"&gt;
          &lt;div id="classdata"&gt;&lt;/div&gt;
        &lt;/select&gt;
      &lt;/div&gt;
  
  
      &lt;div class="col-xs-2"&gt;
        &lt;a href="class_list_form.php" target="_blank"&gt; &lt;span class="glyphicon glyphicon-list-alt"&gt;&lt;/span&gt; view class list&lt;/a&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;br&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>PHP:</p>
  
  <pre><code>include "connect_database.php";
  $course =$_POST['course'];
  $fetchquery = "SELECT * FROM `class` WHERE course = '$course'";
  $fetch = mysqli_query($conn, $fetchquery);
  while ($rows = mysqli_fetch_assoc($fetch)) {
      echo "&lt;option value=".$rows['class_code']." &gt;".$rows['class_code']."      &lt;/option&gt;";
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>function classcode() {
    var course = $('#course_reservation').val();
    $.ajax({
      type: "POST",
      url: "reservation_class_code.php",
      data: "course=" + course
    }).done(function(data) {
      alert(data)
      $('#classdata').html(data);
    });
  }
  </code></pre>
  
  <p>I want to populate dropdown option depending on what the user will choose using ajax but dreamweaver highlights div with an id of classdata as an error.</p>