Issue in dynamically added select list

Issue in dynamically added select list

in my project,(Edit page) i have an input box that contain the value from
db. and place a div over that input box(when page loading that div is not
shown). my need is when i am clicking on that input box i want to enable
the div and show as a drop down select list. i am using following code,
http://jsfiddle.net/wzPYf/1/
<div class="role">
<div style="float:left;">In Rotary Club of Puthencruz : &nbsp;</div>
<div class="currentrole"><input type="text" value="@Model.Mem_Role"
name="Mem_Role" id="memrole"/></div>
<div class="allrole"></div>
</div>
//jquery
$(document).ready(function () {
$('#memrole').click(function () {
$('.allrole').attr('disabled', false);
var arr = [
{ val: 'member', text: 'Member' },
{ val: 'president', text: 'President' }
];
var sel = $('<select>').appendTo('body');
$(arr).each(function () {
sel.append($("<option>").attr('value', this.val).text(this.text));
});
$('.allrole').html(sel);
});
});
//css
.role {
position:relative;
display:inline-block;
}
.currentrole {
position: absolute;
margin-left:100%;
width:200%;
}
.allrole {
position:absolute;
width:150px;
height:20px;
margin-left:100%;
display:none;
}
But my jquery part is not working, the dropdown select list is not displayed.