JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<select class="myCSS" id="drp1">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>

<div>
<select class="myCSS" id="drp2">
</select>
</div>

<div>
<select class="myCSS" id="drp3">
</select>
</div>

<div>
<select class="myCSS" id="drp4">

</select>
</div>

CSS

div .myCSS{
  width               : 240px;
    height              : 24px;
    border              : 1px solid #cccccc;
    vertical-align      : middle;
    margin-bottom:5px;
}

JavaScript

$(document).ready(function(){

var drp1= $("#drp1");
var drp2= $("#drp2");
var drp3= $("#drp3");
var drp4= $("#drp4");

var optionsdrp2 = ["Option 1","Option 2","Option 3","Option 4"];
var optionsdrp3 = ["Option 5","Option 6","Option 7","Option 8"];
var optionsdrp4 = ["Option 9","Option 10","Option 11","Option 12"];

// I am getting my option from the server, but here it is not possible so here I am using the static option

var drp2Update = function(){
	drp2.empty();
  drp2.text("");
	for(var op of optionsdrp2){
  		drp2.append($("<option></option>")
      .attr("value", op)
      .text(op));
  }
  
  drp3Update();
};

var drp3Update = function(){
	drp3.empty();
  drp3.text("");
	for(var op of optionsdrp3){
  		drp3.append($("<option></option>")
      .attr("value", op)
      .text(op));
  }
  drp4Update();
};

var drp4Update = function(){
	drp4.empty();
  drp4.text("");
	for(var op of optionsdrp4){
  		drp4.append($("<option></option>")
      .attr("value", op)
      .text(op));
  }
};

drp2Update();

});