get information from html elements when click on this element

Question

I have like this example, what I need to do is when I click on any cart display the Modal and get data from this card and added in the Modal >>>> in this example everything is working except how to get data and added in the modal:

<div class="row " data-aos="fade-up" data-aos-delay="100">
      @forelse ($services as $service )

            <div class="col-lg-4 col-md-12 mb-4 shadow-md">
              <div class="card">
                <div class="bg-image hover-zoom ripple ripple-surface ripple-surface-light"
                  data-mdb-ripple-color="light">
                  <img src="{{ url('storage/services/'.$service->image) }}" class="w-100" />
                  <a href="#!">
                    <div class="mask">
                      <div class="d-flex justify-content-start align-items-end h-100">
                        @if($service->status == 1)
                        <h5><span class="badge text-bg-primary m-2">
                            Available
                        </span></h5>
                            @else
                            <h5><span class="badge text-bg-danger m-2">
                                Not Available
                            </span></h5>
                            @endif

                      </div>
                    </div>
                    <div class="hover-overlay">
                      <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                    </div>
                  </a>
                </div>
                <div class="card-body">
                  <a href="" class="text-reset stretched-link"
                  data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">
                    <h5 class="card-title mb-3">{{ $service->name }}</h5>
                  </a>
                  <a href="" class="text-reset">
                    <p>{{ $service->info }}</p>
                  </a>
                  <h6 class="mb-3">
                      From <span class="badge text-bg-success">{{ $service->from }}$</span>
                      To <span class="badge text-bg-success">{{ $service->to }}$</span>
                    </h6>
                </div>
              </div>
            </div>
      @empty
          <h2 class="text-center">There are no Services !!!</h2>
      @endforelse
      </div>
      </div>
      </section>
  @endif
</div>

</main>

            {{--  modal here  --}}

            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <form>
                        <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">Service:</label>
                          <input type="text" class="form-control" id="recipient-name">
                        </div>

                        <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">price:</label>
                            <input type="text" class="form-control" id="recipient-name">
                          </div>

                        <div class="mb-3">
                          <label for="message-text" class="col-form-label">info:</label>
                          <textarea class="form-control" id="message-text"></textarea>
                        </div>
                      </form>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Send message</button>
                    </div>
                  </div>
                </div>
              </div>

Answer 1

To solve the problem, you should send ajax request when you click on card. Then extract data from the response and open modal. Also you have to use JavaScript version of modal as you have to open modal by click handler of card where you send the request. In Addition, you have to add route to the controller to accept the request and return JSON response.