Load dynamic optgroup items into html select - php

Question

I have a modal form with two select boxes with the same current_models class.
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Model</label>
<select class='form-control' id='left_model_id' name='left_model_id'>
<div id="left_model" class="current_models"></div>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Model</label>
<select class='form-control' id='right_model_id' name='right_model_id'>
<div id="right_model" class="current_models"></div>
</select>
</div>
</div>
</div>
Each select needs to have it's own id, but they are loading the same select options into groups like this:
$('.current_models').load('ajax_get_models_man_group.php');
Here's my ajax_get_models_man_group.php page:
<?php
require_once 'core/init.php';
$user = new User();
if(!$user->isLoggedIn()) {
Redirect::to('login.php');
}
$models = DB::getInstance()->query("SELECT man.id AS man_id, man.man AS man, models.name AS model, models.id AS model_id FROM hearing_aid_models models LEFT JOIN hearing_aid_man man ON man.id = models.man_id WHERE models.currently_fitting = 'Y' AND company_id = '" . $user->data()->company_id . "' ORDER BY man ASC");
if ($models->error()) {
echo 'Error occurred.';
} else {
$currentGroup = null;
foreach( $models->results() as $result ) {
// start a new optgroup
if( $currentGroup == null || $result->man_id != $currentGroup ) {
// end the previous group
if( $currentGroup != null ) {
echo "</optgroup\n>";
}
// start a new group
echo "<optgroup data-id='{$result->man_id}' label='{$result->man}'>\n";
$currentGroup = $result->man_id;
}
echo "<option value='{$result->model_id}'>{$result->model}</option>\n";
}
// end the last opt group
if( $currentGroup != null ) echo "</optgroup>\n";
}
?>
The problem is that the values do not load into the select divs!
Here's my ajax source code results:
<optgroup data-id='1' label='Audibel'>
<option value='95'>Start 7 Wireless</option>
<option value='96'>Start 7</option>
<option value='99'>A3i Platinum</option>
</optgroup>
<optgroup data-id='16' label='Phonak'>
<option value='98'>Naida Q70</option>
</optgroup>
<optgroup data-id='2' label='Starkey'>
<option value='100'>S Series i30</option>
<option value='81'>3 Series I 70</option>
<option value='82'>3 Series I 90</option>
</optgroup>

Answer 1

1) Get rid of divs inside select tags
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Model</label>
<select class='form-control current_models' id='left_model_id' name='left_model_id'>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Model</label>
<select class='form-control current_models' id='right_model_id' name='right_model_id'>
</select>
</div>
</div>
</div>
2) load ajax inside the right div
$('.current_models').load('ajax_get_models_man_group.php');