JSFiddle - React, Tailwind, and code Playground

by chiragvidani

HTML

<input type="text" id="txtPanelName" />
<input type="hidden" id="hdnPanelResourceId" />
<input type="button" id="btnGetPanelList" value="GetPanelList" />
<div id="dvSelectedInterviewer">
</div>

JavaScript

var bindSelected= function (resourceId, resourceName) {
                if ($('#dvSelectedInterviewer').find('div > span > input:hidden.resourceId[value="' + resourceId + '"]').length <= 0) {
                
                    var html = '<div style="padding-bottom: 2px;"><span class="selectedInterviewer"><label>' + resourceName + '</label><input type="hidden" class="selectedInterviewerResourceId" value="' + resourceId + '" /></span>&nbsp;&nbsp;<a href="#" onclick="javascript: return removeSelectedInterviewer(this);">x</a></div>';
                    $(html).appendTo('#dvSelectedInterviewer');
                }
            };
            
$(function() {
  var interviewerList = new Array();
  interviewerList.push({
    id: 1,
    value: 'Chirag'
  });
  interviewerList.push({
    id: 2,
    value: 'Amit'
  });
  interviewerList.push({
    id: 3,
    value: 'Vaibhav'
  });

  $('#btnGetPanelList').click(function() {
    alert($('#hdnPanelResourceId').val());
  })

  $("#txtPanelName").autocomplete({
    minLength: 1,
    source: interviewerList,
    select: function(event, ui) {
      $('#hdnPanelResourceId').val(ui.item.id);
      bindSelected(ui.item.id, ui.item.value);
    },
  });

});