title: Ajax select option group not working
body: <p>Categories and services are stored into two tables (category, service). I need to load all categories and services to a single select box based on staff selection.</p>
  
  <pre><code>//Jquery
  $('.staff').change(function() {
      var services = $('.service').empty();
      $('&lt;option value="" disabled selected hidden&gt;--Select Service--&lt;/option&gt;').appendTo(services);
      $.get('ajax_service.php', {tutor: $(this).val()}, function(result) {
          $.each(JSON.parse(result), function(index, item) {
              $('&lt;optgroup label="' + index + '"&gt;').appendTo(services);
                  $.each(item, function (name, value) {
                      $('&lt;option value="' + name + '"&gt;' + value + '&lt;/option&gt;').appendTo(services);
                  });
              $('&lt;/optgroup&gt;').appendTo(services);
          });
      });
  });
  
  //ajax_service.php
  if(isset($_GET['staff'])) {
      $staff_id = $_GET['staff'];
      $sql = "SELECT c.category_id, c.category_name, s.service_id, s.service_name "
          . "FROM service s "
          . "INNER JOIN category c ON s.category_id = c.category_id "
          . "WHERE s.staff_id = ? "
          . "ORDER BY s.sort_order ASC";
      $stmt = $pdo-&gt;prepare($sql);
      $stmt-&gt;execute(array($staff_id));
      $services = $stmt-&gt;fetchAll();
      $groups = array();
      foreach ($services as $service) {
          $groups[$service['category_name']][$service['service_id']] = $service['service_name'];
      }
      echo json_encode($groups);
  }
  </code></pre>
  
  <p>This code loads all categories and services but the option group is not works as expected
  <a href="https://i.stack.imgur.com/19cml.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/19cml.png" alt="Result"></a></p>
  
  <p>Result HTML Code</p>
  
  <pre><code>&lt;select class="service" name="ddlService" id="ddlService"&gt;
      &lt;option value="" disabled="" selected="" hidden=""&gt;--Select Service--&lt;/option&gt;
      &lt;optgroup label="Advertising"&gt;&lt;/optgroup&gt;
      &lt;option value="1"&gt;Adware&lt;/option&gt;
      &lt;option value="2"&gt;Brands&lt;/option&gt;
      &lt;option value="3"&gt;Modeling&lt;/option&gt;
      &lt;option value="4"&gt;Sponsorships&lt;/option&gt;
      &lt;option value="5"&gt;Press Release&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>What's wrong with this code?. Can anyone help me track the issue? Thank you very much for your time.</p>