JSFiddle - React, Tailwind, and code Playground

by Nightythehawk

HTML

<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div><br>

JavaScript

let tier = 3;

let dropdowns = new Array();

handleTypes = function(response) {
	if (response.status !== 200) {  
		console.warn('Status Code: ' + response.status);  
    return;
  }
  response.json().then(function(types) {
  
  	for (let i = 0; i < types.length; i++) {
    	let dd = document.createElement('select');
      dd.length = 0;
      dd.id = "module-type-" + i;
      dd.name = types[i].name;
      let opt = document.createElement('option');
      opt.text = types[i].name
      dd.add(opt);
      
      let o = 1;
      while (o < 5 ) {
      let g = document.createElement("div" +o);
      let element = document.getElementById(g);   
			element.appendChild(dd);
      dropdowns.push(dd);
      o++;
		  }
    } 
  }
 
  
  );
	fetch('https://aad.wtf/api/modules').then(function(response) {
  	if (response.status !== 200) {  
			console.warn('Status Code: ' + response.status);  
			return;  
		}
    response.json().then(function(data) {
    	for (let i = 0; i < data.length; i++) {
        if (data[i].tier == tier || data[i].tier == (tier - 1)) {
          option = document.createElement('option');
          if(option.text !== undefined && option.text !== null)
            option.text = data[i].name
          let dropdown = null;
          for (let j = 0; j < dropdowns.length; j++) {
            let dd = dropdowns[j];
          	if (dd.name == data[i].type.name) {
            	dropdown = dd;
              break;
            }
          }
          if (dropdown != null) {
          	dropdown.add(option);
          }
          // var index = data[i].type.dbId - 1;
          // dopdowns[index].add(option);
        }
      }
    });
  });
};

fetch('https://aad.wtf/api/module-types').then(handleTypes);