JSFiddle - React, Tailwind, and code Playground
HTML
Employee Name (Team Leader):
<input type="text" name="empName1" class="autocomplete" />
<div class="container"></div>
<br/>
<br/>Employee Name (Event Process Owner):
<input type="text" name="empName2" class="autocomplete" />
<div class="container"></div>
<br/>
<br/>Employee Name (Sponsor):
<input type="text" name="sponsor" class="autocomplete" />
<div class="container"></div>
<br/>
<br/>Employee Name:
<input type="text" name="empName3" class="autocomplete" />
<div class="container"></div>Employee Name:
<input type="text" name="empName4" class="autocomplete" />
<div class="container"></div>
CSS
.container {
background-color:yellow;
height:20px;
width:200px;
color:red;
}
JavaScript
$(document).delegate('.dialog2', 'click', function() {
$('<div>').simpledialog2({
mode: 'button',
themeHeader: 'b',
headerText: 'Click One…',
headerClose: true,
buttonPrompt: 'Please Choose One',
buttons : {
'OK': {
click: function () {
return !$('.dialog2').closest('li').appendTo('#sortable');
}
},
'Cancel': {
click: function () {
$('#buttonoutput').text('Cancel');
},
icon: "delete",
theme: "c"
}
}
})
})