How do I pass the value from the inside of a for loop ( jinja2 ) to a bootstrap modal to display it in side the modal body?

Question

How do I pass the value from the inside of a for loop ( jinja2 ) to a bootstrap modal to display it in side the modal body?

here is my views.py file:

    if request.method == 'GET':
        driver = get_network_driver(device.napalm_driver)
        with driver(device.IP_address, device.username, device.password) as device_conn:
            interfaces = device_conn.get_interfaces()

        context = {
                    'device': device,
                    'interfaces': interfaces,
                  }
        return render(request, 'network/interface_list.html', context)

Please note that the the device_conn.get_interfaces() method returns a nested dictionary. Here is the html template:

{% extends 'base/base.html' %}
{% block title %}iNet Interface List{% endblock %}
{% block content %}

<div class="section">
{% include 'network/include/interface_list_header.html' %}
{% if messages %}
  {% for message in messages %}
    {% if message.tags == 'success' %}<div class="alert alert-success" role="alert">
        {{ message }}
    </div>{% elif message.tags == 'error' %}<div class="alert alert-danger" role="alert">
        {{ message }}
    </div>{% endif %}
  {% endfor %}
{% endif %}

  <div class="card mx-auto shadow rounded">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th scope="col" style="text-align:center">Interface Name</th>
              <th scope="col" style="text-align:center">Admin status</th>
              <th scope="col" style="text-align:center">Protocol</th>
              <th scope="col" style="text-align:center">Description</th>
              <th scope="col" style="text-align:center">MAC Address</th>
              <th scope="col" style="text-align:center">Last Flapped</th>
              <th scope="col" style="text-align:center">Turn On/Off Port</th>
              <th scope="col" style="text-align:center">Edit Description</th>
            </tr>
            </thead>
          <tbody>
            {% for interface_name, interface in interfaces.items %}
            <tr>
            <form action="{% url 'get_interfaces'  device.id %}" method="post" id="{{ interface_name }}">
              {% csrf_token %}
              <input type="hidden" value="{{ interface_name }}" name="interface_name" />
              <input type="hidden" value="{{ interface.is_enabled|yesno:'False,True' }}" name="enable" />
            </form>
              <td style="text-align:center">{{ interface_name }}</td>
              <td style="text-align:center">{% if interface.is_enabled %}<i class="fa-solid fa-check text-success"></i>{% else %}<i class="fa-solid fa-xmark text-danger"></i>{% endif %}</td>
              <td style="text-align:center">{% if interface.is_up %}<i class="fa-solid fa-check text-success"></i>{% else %}<i class="fa-solid fa-xmark text-danger"></i>{% endif %}</td>
              <td style="text-align:center">{{ interface.description }}&nbsp;</td>
              <td style="text-align:center">{{ interface.mac_address }}</td>
              <td style="text-align:center">{{ interface.last_flapped }}</td>
              <td style="text-align:center"><button class="btn common-button btn-primary" type="submit" form="{{ interface_name }}" value="Submit">{% if interface.is_enabled %}Turn Off{% else %}Turn On{% endif %}</button></td>

<!--                              Modal Trigger button      -->

              <td style="text-align:center"><a href="#" data-bs-toggle="modal" data-bs-target="#editDesc{{ interface_name }}"><i class="fa-regular fa-clipboard"></i></a></td>


<!--                              Modal container               -->

                              <div class="modal fade viewModal" id="editDesc{{ interface_name }}" tabindex="-1" role="dialog" aria-labelledby="editDescLabel" aria-hidden="true">
                                          <div class="modal-dialog modal-lg">

                                                  <div class="modal-content">
                                                      <div class="modal-header">
                                                            <h5 style="font-size: 20px;" class="modal-title" id="editDescLabel">View Console Output</h5>
                                                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                      </div>
                                                      <div class="modal-body">

                                                                    <textarea>{{ interface.description }}</textarea>

                                                      </div>
                                                          <div class="modal-footer">

                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

                                                         </div>
                                                </div>

                                          </div>
                                </div>

            </tr>
            {% endfor %}
          </tbody>

        </table>

      </div>
    </div>
  </div>


</div>
{% endblock %}

I wish to show the {{interface.description}} of the selected interface in the textarea so that I can edit it later. Any help would be appreciated.

My issue is - I am able to fetch {{interface.description}} outside the bootstrap modal, however I am unable to fetch the same thin inside the bootstrap modal. Eventhough both of them are inside the for loop.