JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%">
    <tr>
        <td width="60%">file name 1</td>
        <td width="40%">
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="delete.html?file=1">Confirm?</a>
        </td>
    </tr>
    <tr>
        <td>file name 2</td>
        <td>
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="delete.html?file=2">Confirm?</a>
        </td>
    </tr>
    <tr>
        <td>file name 3</td>
        <td>
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="http://google.com?file=3">Confirm?</a>
        </td>
    </tr>
    <tr>
        <td>file name 4</td>
        <td>
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="http://google.com?file=4">Confirm?</a>
        </td>
    </tr>
    <tr>
        <td>file name 5</td>
        <td>
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="http://google.com?file=5">Confirm?</a>
        </td>
    </tr>
</table>

JavaScript

$(document).not(".confirmDelete").click(function(event){
    if($('.confirmDelete').is(':visible')){
        $('.confirmDelete').hide();
        $('.deleteLink').show();
        return false;
    }
});
$('.confirmDelete').hide();
$('.deleteLink').click(function (event) {
    $(this).hide();
    $('.confirmDelete').filter(':visible').each(function () {
        $(this).hide();
        $(this).prev('.deleteLink').show();
    });
    $(this).next('.confirmDelete').show();
    event.stopPropagation();
    return false;
});