get information from html elements when click on this element

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>