JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-link" data-toggle="modal" data-target="#exampleModal" data-name="justaname" data-url="https://google.com">Click me!</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input type="text" readonly class="form-control-plaintext" id="staticJob" value="None" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary confirm-button">Continue</button>
        </div>
      </div>
    </div>
  </div>

JavaScript

function template(selector) {
	var initial = $(selector);
  initial.remove();
  
  return function instantiate() {
  	var node = initial.clone();
    $(body).append(node);
    return node;
  }
}


$(document).ready(function () {
  $("#exampleModal").on("show.bs.modal", function (event) {
    var button = $(event.relatedTarget);
    var url = button.data("url");
    var name = button.data("name");
    var modal = $(this);

    modal.find(".modal-body input").val("Run " + name + "?");

    modal.find(".confirm-button").on("click", function (event) {
      console.log("caught the click... the log displays x++ every time the modal is reopened");
    });
  });  
});