[FIXED] How can I add a identification value to a modal box to identify which particular div the modal is being opened from

Issue

I have three divs each looking like this

<div class="col-lg-6 col-md-6 col-sm-12 mb-4">
                    <div class="card">
                        <div class="card-body b-primary">
                            <div class="row justify-content-center">
                                <div class="col-md-5 col-sm-12">
                                    <img src="assets/images/gateway/61eedfd72289f1643044823.jpg" class="card-img-top w-100"
                                        alt="Stripe">
                                </div>
                                <div class="col-md-7 col-sm-12">
                                    <ul class="list-group text-center">
                                        <li class="list-group-item">Stripe</li>
                                        <li class="list-group-item">Limit : 50- 50000 USD</li>
                                        <li class="list-group-item"> Charge - 0 USD+ 0% </li>
                                        <li class="list-group-item">
                                            <button type="button" data-id="str"
                                                data-base_symbol="" class=" btn deposit cmn-btn w-100" data-toggle="modal"
                                                data-target="#exampleModal">
                                                Deposit</button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

i have identified and differentiated each of the 3 divs using data-id now when the deposit button is clicked it opens up this modal below,

<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 modal-content-bg">
                <div class="modal-header">
                    <strong class="modal-title method-name text-white" id="exampleModalLabel">Input Deposit Amount</strong>
                    <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </a>
                </div>
                <form action=" {{ route('deposit_request') }}" method="post" class="register">
                   @csrf

                    <div class="modal-body">
                        <div class="form-group">
                           
                            <input type="hidden" name="method_code" class="edit-method-code" value="">
                            <x-jet-validation-errors class="mb-4" />
                            @include('flash-message')
                        </div>
                        <div class="form-group">
                            <label>Enter Amount:</label>
                            <div class="input-group">
                                <input id="amount" type="text" class="form-control form-control-lg" name="usdamt"
                                    placeholder="0.00" required="" autocomplete="off">
                                <div class="input-group-prepend">
                                    <span class="input-group-text currency-addon addon-bg">USD</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-md btn-danger" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn-md cmn-btn">Next</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

now my question is how do I get the data-id variable to the hidden input in the modal to be able to identify which particular payment method was/is been used to open the modal, I suppose it can be done with Ajax or JavaScript, but not being so diverse in this areas I can seem to get it sorted out and is there a better way to differentiate the divs without using data-id

Solution

Bootstrap provides events of their modals.

The event I used here is show.bs.modal. The event details has a property called relatedTarget which tells you what prompted the modal event. From that element you can extract the data-id attribute.

$('#exampleModal').on('show.bs.modal', function (e) {
  var data_id = $(e.relatedTarget).data('id');
  console.log(data_id);
})

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-id="MAGIC" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<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">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">
        ...
      </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>

Answered By - Pedro Estrada

Answer Checked By - David Marino (PHPFixing Volunteer)