I want to show the usernames under user.username.0 . Details in Description

For example my name is David and my friend is Daniel. I want to show these two names in their first letter wise . Like D - David, Daniel

enter image description here

just like these picture.

enter code here
def client(request):
clients = Appointment.objects.filter(practitioner__user=request.user).order_by('-time')
context = {'clients': clients}
return render(request, 'practitioner/clients.html', context)

enter image description here

template code is

enter code here
<div class="listing-wrapeer">
{% for client in clients %}
                    <div class="round-div">
                      <img src="" alt="">
                    <div class="alphabetic-details">
                    <span class="name">{{client.user.username}}</span>
                      <span>Next appointment: 2nd of July @ 19:20</span>

                  {% endfor %}