JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="button" value="delete" class="deleteButton">
    <div class="deleteModal">
        <p>Are you sure you want to delete this item?</p>
        <input type="button" value="Cancel"
        class="modalCancel" />
        <input type="button" value="Delete" class="modalDelete" />
    </div>
</div>
<br />
<br />
<br />
<div>
    <input type="button" value="delete" class="deleteButton">
    <div class="deleteModal">
        <p>Are you sure you want to delete this item?</p>
        <input type="button" value="Cancel"
        class="modalCancel" />
        <input type="button" value="Delete" class="modalDelete" />
    </div>
</div>

CSS

div .deleteModal {
    position:absolute;
    border:solid 1px black;
    padding:8px;
    background-color:white;
    width:160px;
    display:none;
}

JavaScript

$(document).ready(function () {
    $('.deleteButton').each(function (i) {
        var whichModal = i; //use this index, a data attribute on the modal, or $(this).parent().parent() to find delete the actual item from the page
        var deleteModal = $(this).parent().find('.deleteModal');
        $(this).click(function (e) {
            deleteModal.fadeIn('slow');
        });
        $(this).parent().find('.modalDelete').click(function (e) {
            deleteModal.fadeOut('slow');
        });
        $(this).parent().find('.modalCancel').click(function (e) {
            deleteModal.fadeOut('slow');
        });
    });
});