JSFiddle - React, Tailwind, and code Playground
HTML
<p style="text-align: center" class="title">
TODO - Diary Subscription Management
</p>
<div id="alertContainer"></div>
<div id="selectsContainer">
<div id="subscriptionSelect">
<label for="cars">TODO - label subscription</label>
<select name="select1" id="select1">
<option value="-" id="loading">Loading</option>
</select>
</div>
<div id="projectSelect">
<label for="cars">TODO - label project</label>
<select name="select2" id="select2">
<option value="-" id="loading">Loading</option>
</select>
</div>
<div id="showSelect">
<label for="cars">TODO - label show</label>
<select name="select3" id="select3">
<option value="-" id="loading">Loading</option>
</select>
</div>
<div id="noShowSelect">
<label for="cars">TODO - label noshow</label>
<select name="select4" id="select4">
<option value="-" id="loading">Loading</option>
</select>
</div>
<div id="datatableContainer">
<table id="attendeesTable" class="table table-striped">
<thead>
<tr>
<th>TODO - Company</th>
<th>TODO - First Name</th>
<th>TODO - Last Name</th>
<th>TODO - Email</th>
<th>TODO - Show</th>
<th>TODO - NoShow</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
JavaScript
$(document).ready(function () {
// Get subscription data.
var data = {test: "testing", test2: "testing2", test3: "testing3"}
let subscriptionSelect = $('#select1');
let showSelect = $('#select3');
let noShowSelect = $('#select4');
subscriptionSelect.empty().append($('<option></option>').val('').text('------'));
showSelect.empty().append($('<option></option>').val('').text('------'));
noShowSelect.empty().append($('<option></option>').val('').text('------'));
$.each(data, function (key, value) {
let option = new Option(key, value);
$(option).html(value);
noShowSelect.append(option);
showSelect.append(option);
subscriptionSelect.append(option);
});
},
);