JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<a href="/posts/1/delete" class="delete confirm" data-question="Are you sure?">Delete</a>

JavaScript

(function ($) {
  $.fn.message = function (options) {
    $(this).each(function () {
      var $this = $(this);
      $this.on("click", function(e) {
      	e.preventDefault();
        var cnfrm = $("<div class='cnfrm'>" + $this.attr("data-question") + "<button class='y'>Yes</button><button class='n'>No</button>")
        $this.after(cnfrm);
        
        cnfrm.find(".y").on("click", function() {
            $this.slideUp(400, function () { $(this).remove(); });
            location.href = $this.attr("href");
        });
      });
    });
    return this;
  };
})(jQuery);

jQuery(".delete").message();