Использование jQuery Dialog

У меня есть таблица HTML, и я получаю данные для каждой ячейки из базы данных. В некоторых ячейках есть значок редактирования, поэтому, когда пользователь нажимает на нее, он должен видеть всплывающее диалоговое окно. В этом диалоговом окне должно быть раскрывающееся меню с 3 вариантами. И после того, как пользователь выберет один из них и нажмет кнопку «Сохранить», база данных должна обновиться. Ранее вместо использования jQuery Dialog я использовал приглашение, и пользователю приходилось вводить новый статус. Но теперь я хочу использовать диалог.

Ниже приведена часть моего кода в файле tracking.php.

                    <td>
<?php
$var=$arrayD['Structural Data Loaded'];
echo
'<a data-id="$id" class="StructuralDataLoaded">' . $var . ' <img class="img" onclick="javascript:SelectStatus(data-id);" src="images/edit.png"></a>';
?>
</td>




/* Selecting new status DIV */
<div id="SelectingStatus" title="Select Status" style="display:none;">
<h>
Select the status
</h>

<select>
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
</select>

</div>


<script>

function SelectStatus(id) {

$('#SelectingStatus').dialog('destroy');
var SelectingStatus = $('#SelectingStatus');
SelectingStatus.dialog({
close: function(event, ui) {
$(this).dialog('destroy');
},
modal: true,
title: 'Select Status',
width: 600,
height: 'auto',
overlay: {
backgroundColor: '#000000',
opacity: 0.5
},

});

}

сейчас, когда я нажимаю на иконку редактирования, я не вижу всплывающего диалога. В чем проблема?