JSFiddle - React, Tailwind, and code Playground
HTML
<body
<table id="CustomerTable">
<thead>
<tr>
<th>Customer</th>
<th>Filter the Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>EXAMPLE</td>
<td class="dropdown">
<form action="" name="FILTER">
<select name="filter_for" >
<div class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</select>
</form>
</td>
</tr>
</tbody>
</table>
</body>
JavaScript
function readCustomerSuccessCallback(data, response) {
var customerTable = document.getElementById("CustomerTable");
for (var i = 0; i < data.results.length; i++) {
var row = customerTable.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1 = "data.results[i].CUSTOMER_NAME";
cell2.innerHTML = '<a href="javascript:void(0);" onclick="readProducts(' + data.results[i].STATION_ID + ')">' + data.results[i].CUSTOMER_NAME + '</a>';
}
}