JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<input type="text" class="validTags inputTextStyling">
<table class="table table-striped table-condensed valid-tags dataTable" style="width:100%;">
<thead>
<tr>
<th>Tag Name</th>
<th>Autofixes</th>
<th>Manage</th>
</tr>
</thead>
<tbody class="validTagsTable">
</tbody>
</table>
JavaScript
$(document).ready(function(){
var table = $('.valid-tags').DataTable();
$('.validTags').keypress(function(e) {
var validValue = $(this).val();
var ruleID = $('.ruleID').val();
if (e.which == 13) {
///if ($(".validTagsTable tr:eq(1) td:contains(" + validValue + ")").length) {} else {
$(this).val("");
table.row.add([
validValue,
'0',
'<button class="btn btn-default btn-sm manageAutofixes" type="button">Manage</button> <button class="btn btn-danger btn-sm deleteValid">Delete</button>',
]).draw(false);
//}
}
});
})