JSFiddle - React, Tailwind, and code Playground

by deathstalkersid

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  </head>

  <body>
    <a href="#" id="open-modal" data-toggle="modal" data-foo="foo" data-target="#emailFoo">Click</a>
    <div class="modal fade" id="emailFoo">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <input type="hidden" id="hidden-value">
          <div class="modal-footer">
            <button id="sendEmail" type="button">OK</button>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

    <script>
      $('#open-modal').on('click', function(event) {
          $('#hidden-value').val($(this).data('foo'));
      });
      
      $( "#sendEmail" ).on('click', function() {
          console.log($('#hidden-value').val());
      });
    </script>
  </body>

</html>