JSFiddle - React, Tailwind, and code Playground

by Nightythehawk

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="officerbriefing0"></div>
<div id="officerbriefing1"></div>
<div id="officerbriefing2"></div>
<div id="officerbriefing3"></div>

<p></p>

<select id="officerbriefing0"></select>

CSS

body {max-width: 583px;}
div {float:left;
margin-right: 10px;}

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 = "officer-briefing-types-" + i;
      dd.name = types[i].name;
      let opt = document.createElement('option');
      opt.text = types[i].name;
      dd.add(opt);
      let element = document.getElementById("officerbriefing"+i);   
			element.appendChild(dd);
      dropdowns.push(dd);

		  }
    }  
  );
	fetch('https://aad.wtf/api/officer-briefings').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 (tier >= 3) {
          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/officer-briefing-types').then(handleTypes);

var myobject = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C'
};