JSFiddle - React, Tailwind, and code Playground

HTML

<button class="del">DELETE</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

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

         // var id = $(this).attr('cmnt-id');
         // $.post(url,{
         //data sent
         //},function(data){
         //remove the comment div

         //show the confirm box and ask for that question now
         confirmBox("Sure wanna delete this?");
         $('#console').append('deleted<br />');
         //});
     });

 });

 function confirmBox(text) {
     var c = $('.confirm');
     c.children('.confirm-text').text(text);
     c.show();
 }