JSFiddle - React, Tailwind, and code Playground

by renzuii

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- 5 is the id person that going to transfer with -->
<button data-id="8" class="showmodal" class="fundTable btn btn-success btn-sm text-bold">
  <i class="fas fa-hand-holding-usd mr-1"></i> 5 FUND
</button>

<div id="fundModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="#">
          <div class="form-group">
            <label for="">UserID</label>
            <input type="text" id="usertransferid">
          </div>
          <div class="form-group">
            <label for="">Amount</label>
            <input type="number" id="amount">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JavaScript

$('.showmodal').on('click', function(e){
	e.preventDefault();
  
  $('#usertransferid').val(this.dataset.id);
  $('#fundModal').modal('show')
})


$('#fundModal').on('hidden.bs.modal', function () {
  $('#usertransferid').val('')
  $('#amount').val(0)
})