JSFiddle - React, Tailwind, and code Playground
HTML
<table id="metadataListTable" class="display" border="1" >
<tr id='6841' >
<td class="center">QA</td>
<td class="center">rm</td>
<td class="center">rm</td>
<td class="center">zuyu0s3r</td>
<td class="center">4.0</td>
<td class="center">HTTPS</td>
<td class="center">
<a href="/Grouping/ShowMetadataDetail.do?metadataID=6841&days=1" style="margin:10px;margin-right:30px;" class="button">View Details</a>
</td>
<td class="center">
<a href="/Grouping/ShowMetadataEdit.do?metadataID=6841&days=1" style="margin:10px;margin-right:30px;" class="button">Edit</a>
</td>
<td class="center">
<a href="#" id="gglobal" style="margin:10px;margin-right:30px;" class="button delete">Delete</a>
</td>
<td class="center">F</td>
<td class="idata">idata2005</td>
<td class="edata">QA</td>
</tr>
<tr id='456' >
<td class="center">TEST</td>
<td class="center">rm</td>
<td class="center">rm</td>
<td class="center">goya</td>
<td class="center">4.0</td>
<td class="center">HTTPS</td>
<td class="center">
<a href="/Grouping/ShowMetadataDetail.do?metadataID=6841&days=1" style="margin:10px;margin-right:30px;" class="button">View Details</a>
</td>
<td class="center">
<a href="/Grouping/ShowMetadataEdit.do?metadataID=6841&days=1"...
JavaScript
$(document).ready(function() {
$('#metadataListTable').on('click', '.delete', function(event) { // delegate
event.preventDefault();
var ans = confirm("Do you want to delete Metadata?");
if(ans == true) {
var $row = $(this).closest('tr');
alert($row.attr("id"));
var $ifaceData = $row.find('.idata');
var $env = $row.find('.edata');
console.log($ifaceData);
console.log($env);
}
});
});