JSFiddle - React, Tailwind, and code Playground

HTML

<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>

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;

}

JavaScript

$(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);
    });
});