selectable inside dialog box

hi all!
please help me to figure out where went wrong with the code bellow…
thank you!!

[CODE]
<div id=”itemDialog” title=”Item Card”></div>
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; background:#ccc }
</style>

<ol id=”selectable”>
<li class=”ui-widget-content”>Item 1</li>
<li class=”ui-widget-content”>Item 2</li>
<li class=”ui-widget-content”>Item 3</li>
<li class=”ui-widget-content”>Item 4</li>
<li class=”ui-widget-content”>Item 5</li>
<li class=”ui-widget-content”>Item 6</li>
</ol>

<script type=”text/javascript”>
//listener
$(document).ready( function() {
$(“#itemDialog”).dialog({
autoOpen: false
});

});

$(function() {
$( “#selectable” ).selectable({
selected: function(event,ui){
alert(‘here’);
}
});
});

function getItemDialog(){
// increase the default animation speed to exaggerate the effect
var itemData;
$.fx.speeds._default = 100;
$(‘#itemDialog’).dialog(‘open’);

var html;

html = “<ol id=”selectable”>”
html += “<li class=”ui-widget-content”>Item 1</li>”
html += “<li class=”ui-widget-content”>Item 2</li>”
html += “<li class=”ui-widget-content”>Item 3</li>”
html += “<li class=”ui-widget-content”>Item 4</li>”
html += “<li class=”ui-widget-content”>Item 5</li>”
html += “<li class=”ui-widget-content”>Item 6</li>”
html += “</ol>”

$(‘#itemDialog’).append(html);
}
</script>

<script language=javascript>
$(function(){
$(“#bttn”).click(function(){
getItemDialog();
});
});
<input type=button id=”bttn” value=”here”>[/CODE]

Also in #JavaScript _↴