JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<table class="maintable">
 <tr style="line-height:50px;">
 <td>Select Controller</td>
 <td>:</td>
 <td>
 <select name="controllers">
 <option values="0">--Select--</option>
 <option value="1"> controller1</option>
 <option value="2"> controller2</option>
 <option value="3"> controller3</option>
 <option value="4"> controller4</option>

 </select>
 </td>
 </tr>
 <tr style="line-height:20px;">
 <td>Select Access Point</td>
 <td>:</td>
 <td>
 <select name="accessPoint" style="float:left;" id="subcats">
 </select>
 </td>
 </tr>
</table>

JavaScript

var controllerData = new Array();;
  
  controllerData.push({});
  controllerData.push(
  [
  	{display: "Access Point 1", value: "AccessPoint1"},
    {display: "Access Point 2", value: "AccessPoint2"},
    {display: "Access Point 3", value: "AccessPoint3"},
    {display: "Access Point 4", value: "AccessPoint4"}
    ]
  );
    controllerData.push(
  [
  	{display: "Access Point 5", value: "AccessPoint5"},
    {display: "Access Point 6", value: "AccessPoint6"},
    {display: "Access Point 7", value: "AccessPoint7"},
    {display: "Access Point 8", value: "AccessPoint8"}
    ]
  );




	$(document).ready(function(){    
    $('SELECT[name="controllers"]').on('change', function(){
    console.log(controllerData);
    	var selectValue = $(this).val();
      var selectAccessPoint = $("SELECT[name='accessPoint']");
      selectAccessPoint.empty();
      
      console.log("Select value " + selectValue +", controllerData size: "+ controllerData.length);
      
      if(selectValue < controllerData.length){
      	console.log("Select value is accesible");
        for(i = 0; i < controllerData[selectValue].length; i++){
        	console.log("Val:" + controllerData[selectValue] );
          selectAccessPoint.append("<option value=\""+controllerData[selectValue][i].value+"\">"+controllerData[selectValue][i].display +"</option>");
        }
      }else{
      	selectAccessPoint.append("<option>- NO data -</option>");
      }
    });
  
  });