JSFiddle - React, Tailwind, and code Playground

HTML

<table id="gridviewInfo" runatr="server">
  <thead>
    <tr>
      <th>Available Person</th>
      <th>RooNumber</th>
      <th>SelectedPerson</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <select class="judges" id="ddlAvailableJudges1" name=ctl00$contentBody$gvwRoomInformation$ctl02$ddlAvailableJudges>
          <option selected value=''></option>
          <option value="maxico">maxico</option>
          <option value="chennai">chennai</option>
          <option value="newdelhi">newdelhi</option>
          <option value="hongkong">hongkong</option>
        </select>
      </td>
      <td>1</td>
      <td>
        <label>maxico</label>
      </td>
    </tr>
    <tr>
      <td>
        <select class="judges" id="ddlAvailableJudges2" name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges>
          <option selected value=''></option>
          <option value="maxico">maxico</option>
          <option value="chennai">chennai</option>
          <option value="newdelhi">newdelhi</option>
          <option value="hongkong">hongkong</option>
        </select>
      </td>
      <td>2</td>
      <td>
        <label>hongkong</label>
      </td>
    </tr>
  </tbody>
</table>

CSS

#gridviewInfo td:nth-child(1) {
  white-space: nowrap;
  text-align: left;
}

JavaScript

(function(d) {
  // when all the DOMElements are already loaded into the document
  d.addEventListener('DOMContentLoaded', function() {
    // gets the generated table, and get all the dropdownlists inside it
    var table = document.getElementById('gridviewInfo'),
        ddls = [].slice.call(table.querySelectorAll('select')); 
    
    // loop through the dropdownlists
    ddls.forEach(function(ddl, i) {
      // get the label inside the last td
      var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;
      
      // initially, we want to change the dropdownlist selectedvalue to the label text
      ddl.value = lbl.textContent.trim();
      // then, we must disable this option in all the other dropdownlists
      updateDisabled(ddl);
      
      
      // so, we add a change event handler
      ddl.addEventListener('change', function(e) {
        // when the ddl value is changed, we update the label text
        lbl.textContent = ddl.value;
        // and we disable the option selected in all the other dropdownlists
        updateDisabled(ddl);        
      });
    });
    
    function updateDisabled(ddl) {
      // to disable all the other dropdownlists
      // we loop through all the HTMLOptionElements inside the table
      [].forEach.call(table.querySelectorAll('option'), function (opt, j) {
        // we look if the current option inside the loop is not the selected one
        if (opt.parentNode !== ddl) {
          // then, if the option has the same selected value, we disable it, else we enable
          opt.disabled = opt.value && opt.value === ddl.value;
        }
      });
    }
  });
})(document);