JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-button="modal1">Open Modal 1</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-button="modal2">Open Modal 2</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-button="modal3">Open Modal 3</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-button="modal4">Open Modal 4</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-button="modal5">Open Modal 5</button>
    
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

CSS

.

JavaScript

$('.modal').on('show.bs.modal', function (e) {
    var $trigger = $(e.relatedTarget);
    alert($trigger.data('button'));
})