PHP twig foreach Bootstrap Modal needHelp

Question

I'am doing a modal, the modal show the player informations. We have a list of players showed with a twig foreach in a page. When i click on a player, i want the informations of the player. I tried with a simple bootstrap modal but only the first player is working. I should to use a ajax request?

I have some errors, somebody can help me?

The template to modify:

<h1 class="monEffectif">Mon effectif</h1>

<div class="globalTable">

<div class="tableLeft">

 {% for trainer in trainers %}
 {% for team in trainer.teams %}

<h2  class="monEffectif">{{ team.name }}</h2>

  {% for category in categories %}

        <table class="table col-10 custom">
        <thead>
            <tr>
                <th>{{ category.Type }} </th> 
                <th>Contact</th>
            </tr>
        </thead>
        <tbody>

        {% for player in category.Person %}

               <tr>
                <td>
                <a href="{{ path('player_showOne', {'id': player.id}) }}" data-toggle="modal" data-target="#dataModal">{{ player.lastname }} {{ player.firstname }}</a>


          <!-- dataModal -->

    <div id="dataModal" class="modal fade">  
        <div class="modal-dialog">  
            <div class="modal-content">  
                <div class="modal-header"> 
                <h4 class="modal-title" id="modal-title">Profil du joueur</h4> 
                    <button type="button" class="close" data-dismiss="modal">&times;</button>  
                </div>  
                <div class="modal-body">  
                <div class="imageModal">
                    <img src="{{ player.picture }} alt="photo du joueur">
                    <p>{{ player.lastname }} {{ player.firstname }}</p>
                </div>

                <div class="blockModal">
                <div class="leftSide">
                    <p>Date de naissance: </p>
                    <p>Nationalité: </p>
                    <p>Adresse: </p>
                    <p>Code postal: </p>
                    <p>Ville: </p>
                    <p>Adresse mail: </p>
                    <p>Numéro portable: </p>
                </div>
                <div class="rightSide">
                    <p>{{ player.birthday|date("d/m/Y") }}</p>
                    <p>{{ player.nationality }}</p>
                    <p>{{ player.address }}</p>
                    <p>{{ player.postal }}</p>
                    <p>{{ player.city }}</p>
                    <p>{{ player.Email }}</p>
                    <p>(+33){{ player.mobilePhone }}</p>
                </div>
                </div>
                </div>  
                <div class="modal-footer">  
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>  
                </div>  
            </div>  
        </div>  
    </div>```

Answer 1

It's crucial to create unique id's in html, especially when you want to access them with javascript.

{% for player in category.Person %}
    <a href="{{ path('player_showOne', {'id': player.id}) }}" data-toggle="modal{{ player.id }}" data-target="#dataModal{{ player.id }}">{{ player.lastname }} {{ player.firstname }}</a>

    <div id="dataModal{{ player.id }}" class="modal fade">  
        ....
    </div>
{% endfor %}