How to get modal window with id?

Question

PHP

Please tell me there is a table

<tbody class="tbody-id">
              {% for row in rows %}
                {% set lindex = loop.index %}
                
                <tr class="{{row.__auto_set}}">
                  {% for k,v in orders %}
                    <td {% if in_array(k, ['id', '_deal_name']) %} %}width="1"{% endif %} style="position:relative">
                      {% if k == 'num' %}

                        <span class="num">{{ ((page-1) * pagelimit) + lindex }}</span>
                      {% elseif k == 'id' %}
<a class="btn btn-primary" data-id="{{row.id}}" role="button" data-toggle="modal" href="#modal-example">
        узнать айди
    </a>
                        <div class="edit"><a href="{{url}}?edit={{row.id}}">{{row[k]}}</a></div>

I'm trying to make a modal window so that when you click on the button, a window appears with the id of this object (55 appears) - but when you click on the second third button in the table, it shows only one id (55) everywhere, tell me why it sends only the first id? and the rest are not

<a class="btn btn-primary" data-id="{{row.id}}" role="button" data-toggle="modal" href="#modal-example">
        узнать айди
    </a>

<div class="modal fade" id="modal-example" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- заголовок -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">TEST</h4>
            </div>
      
            <div class="modal-body">
                <p>
              {{row.id}}
                </p>
            </div>
         
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">Сохранить</button>
            </div>
        </div>
    </div>
</div>

Answer 1

Different contents of a modal window in Bootstrap 5
example of passing different parameters to the same window:

Answer 2

Tell me the ID, I brought out the object, it has abs 4 divs in the table

{% if row.sysinfo %}<div class="my-abs4" id="my-abs4" data-id="{{row.id}}">{{row.sysinfo}}</div>{% endif %}

it also clings to the first id, can it somehow be assigned a data-id? (by analogy above) so that information from the diva in the textarea is displayed on it in the modal??

<script>
const modalBody = document.querySelector('div.modal-body');
console.log(modalBody);
function insertModal(id){
      console.log(id);
      modalBody.innerHTML = '<p>'+id+'</p>';
 $("#exampleFormControlTextarea1").html($('div .my-abs4').html());
      $(".modal-header").text('Внутренняя/служебная информация' + '\n' + '#' + '\n' + id);
}
</script>

<div class="modal fade" id="modal-example" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">	
            <!-- заголовок -->
            <div class="modal-header" style="text-align:center;font-size:24px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
                    <span aria-hidden="true">&times;</span>
                </button>
            
            </div>
            <!-- содержимое -->

            <div class="modal-body">
             
<textarea class="form-control" style="overflow:auto;resize: vertical;height:300px;" id="exampleFormControlTextarea1" rows="2" placeholder=""></textarea>
            
              
            </div>
             
            <!-- подвал -->
            <div class="modal-footer">
            
                
                <button type="submit" class="btn btn-primary w-100" style="width:100%;" name="actualize">Сохранить</button>
            </div>
        </div>
    </div>
</div>