JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.3.3/dist/jBox.all.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.3.3/dist/jBox.all.min.css">
<form class="my-confirm-form" action="/">
  <input type="text">
  <button type="submit">Submit form</button>
</form>

<hr>

<form class="my-confirm-form" action="/">
  <input type="text">
  <button type="submit">Submit form</button>
</form>
<hr>

<form class="my-confirm-form" action="/">
  <input type="text">
  <button type="submit">Submit form</button>
</form>

CSS

body {
  font-family: sans-serif;
}

JavaScript

var formConfirm;

$(document).ready(function() {

  formConfirm = new jBox('Confirm', {
    confirmButton: 'Submit',
    cancelButton: 'Cancel',
    maxWidth: 450,
    maxHeight: 550,
    confirm: function() {
      submitForm();
    }
  });

  $('.my-confirm-form').on('submit', function(ev) {
    ev.preventDefault();

    formConfirm.submitFormElement = this;
    formConfirm.open();
  });

});

function submitForm() {

  var input = $(formConfirm.submitFormElement).find('input').val();

  alert('Input: "' + input + '" | Send your data via AJAX')
}