JSFiddle - React, Tailwind, and code Playground

HTML

<button class="del">DELETE</button>
<button class="cre">Create</button>
<button class="send">Send</button>
<div id="console"></div>
<div class="confirm">
    <div class="confirm-text"></div>
    <button class="yes">Yes</button>
    <button class="no">No</button>
</div>
<!--just for show nothing important-->

CSS

button {
    cursor:pointer;
}
#console {
    box-shadow: 0 0 12px #DDD;
    position:absolute;
    overflow:auto;
    height:250px;
    width:500px;
    bottom:10px;
    background:#FFF;
    color:#333;
}
.confirm {
    box-shadow: 0 0 12px #000;
    background:grey;
    width:300px;
    padding:10px;
    display:none;
    position:absolute;
    top:50%;
    left:50%;
    margin-top: -150px;
    margin-left: -135px;
}
.confirm-text {
    padding:10px;
    background:#fff;
    border:1px solid #ccc;
}

JavaScript

$('.del').click(function () {

    confirmBox("Sure wanna delete this?", function () {
        $('#console').append('deleted<br />') //or whatever function
    });
});

$('.cre').click(function () {
    confirmBox("Sure wanna create this?", function () {
        $('#console').append('created<br />'); //or whatever function
    });
});

$('.send').click(function () {
    confirmBox("Sure wanna send this?", function () {
        $('#console').append('sent<br />'); //or whatever function 
    });
});




function confirmBox(text,yesFunc) {
    var c = $('.confirm');
    c.children('.confirm-text').text(text);
    c.show();
    $('.confirm > .yes').click(function () {
         yesFunc();
         $('.confirm').hide();
         yesFunc = function () {};
    });    
    $('.confirm > .no').click(function () {
         $('.confirm').hide();
         yesFunc = function () {};
    });
}