JQuery — Php — текстовое поле ввода автофокус не работает

У меня есть два входа tex boxes, Я хочу чтобы они были autofocus когда запись сделана в первом текстовом поле, автофокус должен быть смещен в сторону другого. Я использовал это решение, но это не работает для меня. Мое мнение ниже.

Обновить

<div class="meter-to-sim-mapping-form">

<?php $form = ActiveForm::begin(['id'=>'simmapping-form','options' => ['enctype' => 'multipart/form-data']]); ?>

<?php  if($model->isNewRecord){?>
<label class="control-label">Select Meter #</label><br />
<input type="text" id="the-meter-id" class="form-control col-md-12"  value="<?=$model->meter_id?>"/>
<div style="clear: both;"></div>
<div id="selected_meters_container" ></div>
<div style="clear: both;"></div>

<label class="control-label">Select IMSI #</label><br />
<input type="text" id="the-sim-id" class="form-control col-md-12" value="<?=$model->sim_id?>"/>
<div style="clear: both;"></div>
<div id="selected_imsi_container" ></div>
<div style="clear: both;"></div>
<?php } ?>

<?= $form->field($model, 'imsi')->hiddenInput()->label(false) ?>

<?= $form->field($model, 'sim_number')->textInput(['readonly' => 'readonly']) ?>

<?= $form->field($model, 'operator_name')->textInput(['readonly' => 'readonly']) ?>

<?= $form->field($model, 'meter_msn')->hiddenInput()->label(false) ?>

<?= $form->field($model, 'sim_status')->dropDownList(\app\models\AccurateBase::simstatusArray())?>

<?= $form->field($model, 'historic')->textInput(['readonly' => 'readonly']) ?>

<div class="form-group">
<a class="btn btn-default" onclick="window.history.back()" href="javascript:;"><i
class="fa fa-close"></i>
Cancel</a>
<a class="<?= $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary' ?>" onclick="$('#simmapping-form').submit();" href="javascript:;">
<?= $model->isNewRecord ? 'Create' : 'Update' ?></a>
</div>

<?php ActiveForm::end(); ?>

JS

$(document).ready(function() {
var surveyReferences = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('imsi'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'survey',
remote: {
url: '$urlsim?q=%QUERY',
wildcard: '%QUERY'
}
});
$('#the-sim-id').typeahead(null, {
limit: 50,
name: 'ref-numbers',
display: 'imsi',
source: surveyReferences,
suggestion: function(data) {
return '<p><strong>' + data.id + '</strong> – ' + data.imsi + '</p>';
}
});
jQuery('#the-sim-id').on('typeahead:selected', function(e, datum) {
$('#selected_imsi_container').html('');
$('#metertosimmapping-imsi').val('');
$('#metertosimmapping-sim_number').val('');
$('#metertosimmapping-operator_name').val('');
//$('#metertosimmapping-sim_status').val(datum.sim_status);
$('#metertosimmapping-historic').val(datum.historic);
var html = '<div class="selected-imsi"><input type="hidden" name="selected_imsi[]" value="' + datum.id + '" />' + datum.imsi + '<a onclick="$(this).closest(\'.selected-imsi\').remove()">X</a></div>';
$('#selected_imsi_container').append(html);
$('#metertosimmapping-imsi').append(datum.imsi);
$('#the-sim-id').typeahead('val', '');
$('#metertosimmapping-sim_number').val(datum.sim_number);
$('#metertosimmapping-operator_name').val(datum.operator_name);
//$('#metertosimmapping-sim_status').val(datum.sim_status);
$('#metertosimmapping-historic').val(datum.historic);
});// for meters see below ****************************************************

var surveyReference = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('meter_msn'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'survey',
remote: {
url: '$urlmeters?q=%QUERY',
wildcard: '%QUERY'
}
});
$('#the-meter-id').typeahead(null, {
limit: 50,
name: 'ref-numbers',
display: 'meter_msn',
source: surveyReference,
suggestion: function(data) {
return '<p><strong>' + data.id + '</strong> – ' + data.meter_msn + '</p>';
}
});
jQuery('#the-meter-id').on('typeahead:selected', function(e, datum) {
$('#selected_meters_container').html('');
$('#metertosimmapping-meter_serial').val('');
var html = '<div class="selected-meter"><input type="hidden" name="selected_meters[]" value="' + datum.id + '" />' + datum.meter_msn + '<a onclick="$(this).closest(\'.selected_meters\').remove()">X</a></div>';
$('#selected_meters_container').append(html);
$('#metertosimmapping-meter_serial').append(datum.meter_msn);
$('#the-meter-id').typeahead('val', '');
// $('#metersinventorystore-historic').val(datum.historic);
});

});

Я использую typeahead. Для любого значения, введенного в текстовое поле, список автозаполнения выглядит так, как показано ниже

И после выбора это отображается как ниже

То же самое относится и к IMSI #

Как мне этого добиться? Любая помощь будет высоко оценена