JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container-fluid cloned-row1 cloned_div educat_info" id="cloned-row1" name="cloned-row1">
  <!-- first row-->
  <div class="row">
    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <span class="required-star">*</span>
      <label>School Name</label>
      <br/>
      <div class="input-group">
        <input type="text" id="scl_name" class="ipt_Field scl_name" />
        <p class="form-control-feedback"><i class="fa fa-search custom-mar"></i></p>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <label>School Description</label>
      <br>
      <input type="text" maxlength="30" class="ipt_Field school_Name" name="school_Name" id="school_Name" disabled/>
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 hsc_fid">
      <label><span class="required-star">*</span>High School Avg / CGPA</label>
      <br/>
      <input type="text" maxlength="10" class="ipt_Field ipt_Havg required_Field" id="ipt_Havg" name="ipt_Havg" />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3"></div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 deg_fid">
      <label><span class="required-star">*</span>Degree</label>
      <br/>
      <select class="slt_Field txt_degreName required_Field" id="txt_degreName" name="txt_degreName[]">
        <option value="">Please Select Degree</option>
        <option value="Bachelor of Science in ChemEng">B CHEM</option>
        <option value="B.Ed Field Teacher ">B.ED FT</option>
        <option value="Bachelor of Science in Busines ">B.SC BA</option>
        <option value="Bachelor of Science in Civil E">B.SC CE</option>
       ...

JavaScript

/* json data*/
[{"id":"COL000001","label":"Emirates College of Technology- UAE","value":"COL000001"},
 {"id":"COL000002","label":"Al Khawarizmi International College- UAE","value":"COL000002"},
 {"id":"COL000003","label":"Syscoms College","value":"COL000003"},
 {"id":"COL000004","label":"Abounajm Khanj Pre-Uni Center","value":"COL000004"},
 {"id":"COL000005","label":"Advanced Placement","value":"COL000005"},
 {"id":"COL000006","label":"Al Buraimi College (Uni Clge)","value":"COL000006"},
 {"id":"COL000007","label":"Al-Ain Community College","value":"COL000007"},
 {"id":"COL000008","label":"AMA Computer College","value":"COL000008"},
 {"id":"COL000009","label":"Arab Academy for Bankg and Fin","value":"COL000009"},
 {"id":"COL0000010","label":"ARABACDSCITECHMARTIMETRNS","value":"COL0000010"},
 {"id":"COL0000011","label":"Arapahoe Community College","value":"COL0000011"},
 {"id":"Other","label":"Other","value":"Other"}]
/* autocomplete start here*/
$.widget('custom.tableAutocomplete', $.ui.autocomplete, {
    options: {
        open: function (event, ui) {
            // Hack to prevent a 'menufocus' error when doing sequential searches using only the keyboard
            $('.ui-autocomplete .ui-menu-item:first').trigger('mouseover');
        },
        focus: function (event, ui) {
            event.preventDefault();
        },
		 highlightClass: "ui-state-highlight"
    },
    _create: function () {
        this._super();
        // Using a table makes the autocomplete forget how to menu.
        // With this we can skip the header row and navigate again via keyboard.
        this.widget().menu("option", "items", ".ui-menu-item");
    },
    _renderMenu: function (ul, items) {
        var self = this;
        var $li = $("<li>");
			$table = $('<table class="table-autocomplete">'),
            $thead = $('<thead>'),
            $headerRow = $('<tr>'),
            $tbody = $('<tbody>');

        $.each(self.options.columns, function (index, columnMapping) {
       ...